Javascript 使用ajax和jQuery提交表单

我有一个简单的表单，其中有一个选择框和两个选项。以下是相关的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

事件侦听器：

$('.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);
        }
    });
});

---

您必须在其他事件之外创建

submit

事件侦听器：

$('.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() {
      $.ajax({
             type: "POST",
             url: "script.php",
             data: $(this).parent().serialize(), 
             success: function(data)
             {
                 alert(data);
             }
      });
  });

---

这应该可以做到。不必担心提交事件-它不会由选择框触发

 $('.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");
    $(".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);
      }
  });
});

请尝试以下操作：

$('.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（）”）引用表单，因为处理程序属于表单

但是，由于您将显式地调用submit，因此注册一个处理程序并调用它是没有意义的。您可以直接触发ajax请求：

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

---

当提供处理程序时，它只注册处理程序，但不执行实际的提交

您可以拨打：

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

在您的处理程序注册之后。此外，在处理程序中，必须仅通过“$（this）”（而不是“$（this）.parent（）”）引用表单，因为处理程序属于表单

但是，由于您将显式地调用submit，因此注册一个处理程序并调用它是没有意义的。您可以直接触发ajax请求：

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

---

单击

submit

按钮提交表单时，将执行下一个操作。@Tushar好的，谢谢。实际上我没有提交按钮。我想在选择框更改时执行服务器脚本。我该怎么办？感谢您的时间：）当您通过单击

提交
按钮提交表单时，将执行下一个操作。@Tushar好的，谢谢。实际上我没有提交按钮。我想在选择框更改时执行服务器脚本。我该怎么办？感谢您的时间：）
data:$（this）.parent（）.serialize（）
应该是
data:$（this）.serialize（）
我想-既然您在表单的提交中处理这个问题，那么$（this）就是表单本身。
数据：$（this）.parent（）.serialize（）应该是
数据：$（this）.serialize（）
我想-既然您在表单的提交过程中处理这个问题，那么$（这个）就是表单本身。好的，我尝试了这个，它成功了。非常感谢！将在几分钟内接受答案（系统不允许我提前这么做）。好的，我尝试了这个，它成功了。非常感谢！将在几分钟内接受答案（系统不允许我提前这么做）。