ajax请求页面重定向答案

【问题标题】：ajax request page redirectingajax请求页面重定向
【发布时间】：2015-06-09 22:51:27
【问题描述】：

我正在通过 ajax 在main.php 中加载一个名为staff_view.php 的表单。它加载正常，但是当我将表单提交给staff_post.php 时，它会重定向到它而不是在控制台中显示，在我添加使用 ajax 加载表单的代码之前，它发布得很好，但在重定向之后。

这是我的代码

$(document).ready(function() {            
    $('.content_load').load('staff_view.php');
    $('ul#nav li a').click(function() {
        var page = $(this).attr('href');
        $('.content_load').load(page);
        $('form.ajax').on('submit', function() {
            var that = $(this);
            url = that.attr('action'),     
                type = that.attr('method'), 
                data = {};

            that.find('[name]').each(function(index, value) {            
                var that = $(this),
                    name = that.attr('name'),
                    value = that.val();
                    data[name] = value;
            });

            $.ajax({
               url: url,
               type: type,
               data: data,
               success: function(response){
                   console.log(response);
               }
            });
        });
        clearAll();
        return false;
    });
});

function clearAll(){
    $("form :input").each(function(){
        $(this).val(""); 
    });
}

【问题讨论】：

那是因为您必须防止锚点 (<a>) 的默认行为（操作）在默认情况下重定向。简而言之，将$('ul#nav li a').click(function() { 更改为$('ul#nav li a').click(function(e) {（注意e），然后添加e.preventDefault();。类似情况：stackoverflow.com/questions/11240897/…（不重复）。考虑到和
都可能重定向（因为它的 href 可能强制重定向，而因为提交重定向）
，表单也发生了同样的情况（提交操作）

标签： php jquery ajax

【解决方案1】：

因为它是一个表单，并且因为您希望通过 AJAX 而不是表单自动使用的通常的“重定向到页面”方法提交，所以您必须禁止默认操作。

改变这个：

$('form.ajax').on('submit', function(){
    var that = $(this);
    etc.

到这里：

$('form.ajax').on('submit', function(e){  // <=== note the (e)
    e.preventDefault();                   // <=== e used again here
    var that = $(this);
    etc.

【讨论】：

【解决方案2】：

您需要在单击锚标记时阻止默认操作，即会将您重定向到 href 属性中的链接

$('ul#nav li a').click(function(e){
    e.preventDefault(); 
    var page = $(this).attr('href');
    $('.content_load').load(page);
    // code...

这就是导致您重定向的原因

【讨论】：

亲爱的，我只是试试还是一样
我看到了另一个答案，但在其他答案中，e.preventDefault() 是在提交事件上，而不是在锚点点击上...如果您不知道是什么原因导致重定向，请使用在这两种情况下：表单提交和锚点点击。如果标签需要保存任何数据用户数据-* 属性
与其他答案问题未解决，我已将输入更改为按钮但尚未修复。我的代码好吗？或者我可能是先使用加载方法加载 html，然后再次使用 $.ajax 来提交数据？我不确定我只是在猜测，
一个问题。我知道您在点击锚标记时加载页面内容。但是，为什么要在每次锚点点击时添加“onsubmit”事件？如果您加载一些需要 javascript 代码的表单。将该 javascript 代码放入包含该表单的 HTML 代码的文件中，您可以使用 ajax 动态加载该代码。
因为稍后我有更多页面要加载，例如现在我有staff_view.php 然后是student_view.php 然后是campus_view.php

【解决方案3】：

我可能是错的，但看起来您可能有一个竞争条件来加载页面并附加提交侦听器。该页面可能会在 $('form.ajax') 位执行后加载。

$('.content_load').load(page); // Race condition?
$('form.ajax').on('submit', function() {

一种解决方法是将以下代码移动到完成回调中：

$('.content_load').load(page, function() {
    $('form.ajax').on('submit', function(e) {
       e.preventDefault();
       // ...
});

另外，添加e.preventDefault(); 以防止表单实际提交。

【讨论】：