javascript - 知道提交了哪个表单

Question

我在一个页面中有八个表单(Form0、Form1、Form2 等等)。当提交表单时，数据由 JS 传递并发送到 ReassignPreg.php，后者在 DB 中搜索数据并用 json 发送回来。然后更新页面上适当的 div。

下面的代码正在做它的工作。但是我有八份几乎相同的代码，每个表格一份(为简洁起见，我只复制了其中的两份)。像我这样的新手和业余爱好者，我在徘徊合成此代码的方式(获取表单名称，然后将其仅传递给一个函数)。

<script type="text/javascript">
$(document).ready(function(){
  $("#Form0").submit(function(){
    var cadena = $(this).serialize();
    $.get('ReassignPreg.php?cadena='+cadena, function(row2){
      var text = row2;
      var obj = JSON.parse(text);
      var imagen='<img src="../ImageFolder/'+obj.File+'.png" width="530" />'

      $("#PregBox00").html(imagen)
      $("#PregBox01").html(obj.Clase)
      $("#PregBox02").html(obj.Dificultad)
      $("#PregBox03").html(obj.Tipo)
    });
  return false;
  });
});


$(document).ready(function(){
  $("#Form1").submit(function(){
    var cadena = $(this).serialize();
    $.get('ReassignPreg.php?cadena='+cadena, function(row2){
      var text = row2;
      var obj = JSON.parse(text);
      var imagen='<img src="../ImageFolder/'+obj.File+'.png" width="530" />'

      $("#PregBox10").html(imagen)
      $("#PregBox11").html(obj.Clase)
      $("#PregBox12").html(obj.Dificultad)
      $("#PregBox13").html(obj.Tipo)
    });
  return false;
  });
});
</script>

Answer 1

多一点模块化会有很大帮助

$(document).ready(function () {
    $("[id^=Form]").on('submit', function (e) {
        e.preventDefault();

        var _form  = this.id.slice(-1); // 0, 1, etc
        var cadena = $(this).serialize() + '&form=' + _form;

        $.get('ReassignPreg.php?cadena=' + cadena, function (row) {
            var image = $('<img />', {
                src   : "../ImageFolder/" + row.File + ".png", 
                width : 530
            });

            $("#PregBox"+_form+"0").html(image);
            $("#PregBox"+_form+"1").html(row.Clase);
            $("#PregBox"+_form+"2").html(row.Dificultad);
            $("#PregBox"+_form+"3").html(row.Tipo);
        }, 'json');
    });
});

现在您将在服务器上拥有一个包含表单编号的 form 键，例如在 PHP 中您可以使用 $_GET['form']等