使用ajax和jQuery提交表单

问题描述：

我有一个简单的表单，其中有一个选择框和两个选项。这里是相关的jQuery代码：使用ajax和jQuery提交表单

$('.myCssClass').on('change', function() { 
     alert("This is executed"); 
     $(this).parent().submit(function(e) { 
     alert("This is NOT executed"); 
      $.ajax({ 
       type: "POST", 
       url: "script.php", 
       data: $(this).parent().serialize(), 
       success: function(data) 
       { 
        alert(data); 
       } 
       }); 
      e.preventDefault(); 
     });

窗体是选择框的父项。因此，当我更改选择框选项时执行第一个警报，但是从未到达下一个警报。任何想法为什么？

当你通过点击'submit'按钮来提交表单时，下一步就会被执行。 – Tushar

@Tushar好的，谢谢。我没有实际提交按钮。我想在选择框更改时执行服务器脚本。我该怎么办？谢谢你的时间:) – Whirlwind

答

这应该这样做。不要打扰提交事件 - 它不会被选择框触发。

$('.myCssClass').on('change', function() { 
     $.ajax({ 
      type: "POST", 
      url: "script.php", 
      data: $(this).parent().serialize(), 
      success: function(data) 
      { 
       alert(data); 
      } 
     }); 
    });

好吧，我试过这个，它工作。谢谢一堆！几分钟后会接受答案（系统不会让我这么做）。 – Whirlwind

@Whirlwind谢谢。不要忘记接受:-) – ADyson

答

你必须创建submit事件侦听器outide其他事件：

$('.myCssClass').parent().submit(function(e) { 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: $(this).serialize(), 
     success: function(data){ 
      alert(data); 
     } 
    }); 

    e.preventDefault(); 
}); 

$('.myCssClass').on('change', function() { 
    $(this).parent().submit(); 
});

或者作为链：

$('.myCssClass').on('change', function() { 
    $(this).parent().submit(); 
}) 
.parent().submit(function(e) { 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: $(this).serialize(), 
     success: function(data){ 
      alert(data); 
     } 
    }); 

    e.preventDefault(); 
});

但是为什么两个事件？只要发送上更改数据：

$('.myCssClass').on('change', function() { 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: $(this).parent().serialize(), 
     success: function(data){ 
      alert(data); 
     } 
    }); 
});

答

$('.myCssClass').on('change', function() { 
    alert("This is executed"); 
    $(this).parent('form#id').submit(); // improve performance by reducing the traversal 
}); 

$("#form-with-id").on('submit', function(e){ 
    e.preventDefault(); 
    var data = $(this).serialize(); 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: data, 
     success: function(data){ 
     alert(data); 
     } 
    }); 
});

希望这个作品。

'data：$（this）.parent（）。serialize（）'应该是'data：$（this）.serialize（）'我想 - 因为你在一个提交中处理这个的形式，那么$（this）将是表单本身。 – ADyson

答

尝试以下操作：

$('.myCssClass').on('change', function() { 
    alert("This is executed"); 
    $(".form-with-class").submit(); 
}); 

$(".form-with-class").on('submit', function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: $(".form-with-class").serialize(), 
     success: function(data){ 
     alert(data); 
     } 
    }); 
});

答

时的处理程序提供了它

刚刚注册的处理程序，但它不执行实际提交。您的处理程序注册后

$(this).parent().submit();

：

您可能需要调用。而且，在你的处理程序中，你必须通过“$（this）”（而不是：“$（this）.parent（）”）来引用表单，因为处理程序属于表单。

但是既然你会调用提交显式，那么在注册一个你随后调用的处理函数就没有意义了。你可以直接激发你的ajax请求：

$('.myCssClass').on('change', function() { 
    alert("This is executed"); 
     $.ajax({ 
      type: "POST", 
      url: "script.php", 
      data: $(this).parent().serialize(), 
      success: function(data) 
      { 
       alert(data); 
      } 
      }); 
    });

使用ajax和jQuery提交表单

相关推荐