Question

我有一个HTML表单，用PHP提交电子邮件，当它提交时，它会重定向到该PHP页面。有没有办法防止这种重定向发生？我使用jQuery构建了一个动画，我想要发生而不是重定向。我试过返回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

您应该使用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 2

您可以尝试event.preventDefault（）;而不是返回false。像这样：

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

Answer 3

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

Answer 4

使用Ajax

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

note - 我建议使用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

$('#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 6

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

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

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

Answer 7

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

另一个解决方案是通过ajax发帖子。但如果页面需要进行错误检查或其他事情，那会更棘手。

以下是一个例子：

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

Answer 8

HTTP的设计意味着使用数据进行POST将返回页面。原始设计师可能打算将其作为POST的“结果”页面。

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

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

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

Answer 9

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

Answer 10

您可以使用以下

e.preventDefault()

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

另外，如果我建议你阅读：.prop（）vs .attr（）

我希望它会对你有帮助，

代码示例：

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

Answer 11

就像布鲁斯阿姆斯特朗在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 12

你必须把return放在submit（）调用中。

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

Answer 13

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

Answer 14

您只需在控制器上将操作结果作为NoContentResult即可

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

Answer 15

由于它绕过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 = ""

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

Answer 16

我在原始帖子发表10年后找到了此页面（！），因此需要以香草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>

提交表单后防止重定向

16 个答案:

使用Ajax