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

Question

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

MySQL 数据库的响应显示 - 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 页面将输入值发送到数据库，如下所示，

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

});