Question

我有一个脚本，可以动态生成带有相应ID的表单元素，例如

来自MySQL db的响应说 - 4，然后

<form ID="form0">
<Input>....
<Button type="submit>....
</form>

<form ID="form1">
<Input>....
<Button type="submit>....
</form>

<form ID="form2">
<Input>....
<Button type="submit>....
</form>

<form ID="form3">
<Input>....
<Button type="submit>....
</form>

生成这个表单列表后，我有一个AJAX代码，它检测提交按钮并通过PHP页面将输入值发送到db，如下所示，

$(document.body).on('submit', '#form' ,function(e){
e.preventDefault();
var postData = $("#form").serialize();

$.post("../../../functions/processing.php",postData,function(data, status){
  var selectedData = JSON.parse(data);     
  $.each( selectedData, function( i, val ) {
             // do something here...                                           
       });
});
});

所以我的问题是，对于表单列表，我必须以某种方式为form0，form1，form2，form3生成多个这个AJAX代码，因为我无法预测将生成多少表单，我不能像上面那样编写一个AJAX代码..无论如何动态生成动态生成的多个表单的AJAX代码？

Answer 1

为表单提供一个类，将其标识为要由AJAX处理程序处理的表单。然后，在处理程序内部引用this以获取正在提交的表单元素。

<form ID="form0" class="js-ajax-form">
   <input>....
   <button type="submit>....
</form>

处理程序

$(document).on('submit', '.js-ajax-form' ,function(e){

    e.preventDefault();
    var postData = $(this).serialize();

    $.post("../../../functions/processing.php",postData,function(data, status){
      var selectedData = JSON.parse(data);     
      $.each( selectedData, function( i, val ) {
                 // do something here...                                           
           });
    });

});

在Javascript中为动态生成的元素生成多个AJAX代码，

1 个答案: