提交表单后防止重定向

Question

我有一个使用 PHP 提交电子邮件的 HTML 表单，当它提交时，它会重定向到那个 PHP 页面。有没有办法防止这种重定向发生？我用 jQuery 构建了一个动画，我希望它发生而不是重定向。我试过 return false;，但它不起作用。这是我的功能：

$(function() {
    $('.submit').click(function() {
        $('#registerform').submit();
        return false;
    }); 
});

这是开始的表单标签：

<form id="registerform" action="submit.php" method="post">

还有提交按钮：

<input type="submit" value="SUBMIT" class="submit" />

Answer 1

我在原始帖子之后 10 年（！）找到了这个页面，并且需要作为 vanilla js 而不是 AJAX 的答案。我在@gargAman 的回答的帮助下想通了。

使用适当的选择器将按钮分配给变量，例如

document.getElementById('myButton')

然后

myButton.addEventListener('click', function(e) {
    e.preventDefault();
    // do cool stuff
});

我应该注意我的 html 看起来像这样（具体来说，我没有在我的按钮中使用 type="Submit" 并在我的表单中使用 action=""：

  <form method="POST" action="" id="myForm">
    <!-- form fields -->
    <button id="myButton" class="btn-submit">Submit</button>
  </form>

Answer 2

由于绕过了CORS和CSP，所以要保留在工具箱中。这是一个变体。

这将在localhost:8080 发布一个base64 编码的对象，并在使用后清理DOM。

const theOBJECT = {message: 'Hello world!', target: 'local'}

document.body.innerHTML += '<iframe id="postframe" name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe><form id="dynForm" target="hiddenFrame" action="http://localhost:8080/" method="post"><input type="hidden" name="somedata" value="'+btoa(JSON.stringify(theOBJECT))+'"></form>';
document.getElementById("dynForm").submit();
dynForm.outerHTML = ""
postframe.outerHTML = ""

在网络调试器选项卡中，我们可以观察到从 tls/https 页面成功 POST 到 http:// 未加密服务器。

Answer 3

您可以简单地将您的操作结果设置为控制器上的 NoContentResult

public NoContentResult UploadFile([FromForm] VwModel model)
    {
       return new NoContentResult();
    } 

Answer 4

使用 Ajax

使用jQuery Ajax 请求方法，您可以将电子邮件数据发布到脚本（submit.php）。在脚本执行后使用success 回调选项为元素设置动画。

注意 - 我建议使用 ajax 响应对象来确保脚本成功执行。

$(function() {
    $('.submit').click(function() {
        $.ajax({
            type: 'POST',
            url: 'submit.php',
            data: 'password=p4ssw0rt',
            error: function()
            {
               alert("Request Failed");
            },
            success: function(response)
            {  
               //EXECUTE ANIMATION HERE
            } // this was missing
        });
        return false;
    }); 
})

Answer 5

您必须将 return 放在 submit() 调用中。

  $('.submit').click(function() {
     $('#registerform').submit(function () {
     sendContactForm();
     return false;
    });
    //Here you can do anything after submit
}

Answer 6

$('#registerform').submit(function(e) {
   e.preventDefault();
   $.ajax({
        type: 'POST',
        url: 'submit.php',
        data: $(this).serialize(),
        beforeSend: //do something
        complete: //do something
        success: //do something for example if the request response is success play your animation...
   });

})

Answer 7

就像 Bruce Armstrong 在 his answer 中建议的那样。但是我会使用FormData:

$(function() {
    $('form').submit(function() {
        var formData = new FormData($(this)[0]);
        $.ajax({
            type: 'POST',
            url: 'submit.php',
            data: formData,
            processData: false,
            contentType: false,
        });
        return false;
    }); 
})

Answer 8

你可以如下使用

e.preventDefault() 

如果调用此方法，则不会触发事件的默认动作。

如果我可以建议阅读以下内容：.prop() vs .attr()

希望对你有帮助

代码示例：

$('a').click(function(event){
    event.preventDefault();
    //do what you want
  } 

Answer 9

您可以尝试 event.preventDefault(); 而不是 return false像这样：

$(function() {
$('#registerform').submit(function(event) {
    event.preventDefault();
    $(this).submit();
    }); 
});

Answer 10

你应该用ajax发布它，这将阻止它改变页面，你仍然会得到信息。

$(function() {
    $('form').submit(function() {
        $.ajax({
            type: 'POST',
            url: 'submit.php',
            data: { username: $(this).name.value, 
                    password: $(this).password.value }
        });
        return false;
    }); 
})

见Post documentation for JQuery

Answer 11

简单的答案是通过 AJAX 请求将您的调用发送到外部脚本。然后按照你喜欢的方式处理响应。

Answer 12

如果不知道你在这里想要完成什么很难说，但如果你花时间用 javascript 解决这个问题，AJAX 请求将是你最好的选择。但是，如果您想完全在 PHP 中完成，请将其放在脚本的末尾，您应该进行设置。

if(isset($_SERVER['HTTP_REFERER'])){
    header("Location: " . $_SERVER['HTTP_REFERER']);    
} else {
    echo "An Error";
}

这仍然会导致页面更改两次，但用户将在发起请求的页面上结束。这甚至不是正确的方法，我强烈建议使用 AJAX 请求，但它可以完成工作。

Answer 13

如果您可以运行 javascript（看起来可以），请创建一个新的 iframe，然后发布到该 iframe。你可以做<form target="iframe-id" ...> 这样所有的重定向都发生在 iframe 中，你仍然可以控制页面。

另一种解决方案是也通过 ajax 发布帖子。但是如果页面需要错误检查或其他东西，那就有点棘手了。

这是一个例子：

$("<iframe id='test' />").appendTo(document.body);
$("form").attr("target", "test");

Answer 14

HTTP 的设计意味着使用数据进行 POST 将返回一个页面。最初的设计者可能打算将其作为您 POST 的“结果”页面。

PHP 应用程序 POST 回到同一页面是正常的，因为它不仅可以处理 POST 请求，而且可以根据原始 GET 生成更新的页面，但使用来自 POST 的新信息。但是，没有什么可以阻止您的服务器代码提供完全不同的输出。或者，您可以发布到完全不同的页面。

如果您不想要输出，我在 AJAX 起飞之前看到的一种方法是让服务器返回（我认为）250 的 HTTP 响应代码。这称为“无内容”，这应该让浏览器忽略数据。

当然，第三种方法是使用您提交的数据进行 AJAX 调用。

Answer 15

如果您希望 PHP 页面处理表单中的信息，那么您必须调用该 PHP 页面。为避免在此过程中重定向或刷新，请通过 AJAX 提交表单信息。也许使用 jQuery 对话框来显示结果，或者您的自定义动画。

Answer 16

您可能只需要对页面执行 Ajax 请求。并且做return false 并没有做你认为它正在做的事情。