Javascript 了解提交的表格

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

下面的代码正在执行其任务。但我有八份几乎相同的代码，每种形式一份（为了简洁起见，我只复制了两份）。虽然我是新手和业余爱好者，但我还是在想，哪一种方法是合成此代码的方法（获取表单名称，然后将其传递给一个函数）

$（文档）.ready（函数（）{
$（“#Form0”）.submit（函数（）{
var cadena=$（this.serialize（）；
$.get（'ReassignPreg.php？cadena='+cadena，函数（第2行）{
var text=row2；
var obj=JSON.parse（文本）；
var imagen=''
$（“#PregBox00”）.html（imagen）
$（“#PregBox01”）.html（obj.Clase）
$（“#PregBox02”）.html（对象定义）
$（“#PregBox03”）.html（obj.Tipo）
});
返回false；
});
});
$（文档）.ready（函数（）{
$（“#Form1”）.submit（函数（）{
var cadena=$（this.serialize（）；
$.get（'ReassignPreg.php？cadena='+cadena，函数（第2行）{
var text=row2；
var obj=JSON.parse（文本）；
var imagen=''
$（“#PregBox10”）.html（imagen）
$（“#PregBox11”）.html（obj.Clase）
$（“#PregBox12”）.html（对象定义）
$（“#PregBox13”）.html（obj.Tipo）
});
返回false；
});
});

您可以为每个表单添加一个带有ID/名称的隐藏字段，并使用该字段来标识提交表单的表单

您可能需要将类分配到

PregBox

元素中，然后根据表单的ID将它们作为目标

  $('form').submit(function(){ // listen to all form submissions.
    var formID = $(this).prop('id'); // get the form ID here and do what you like with it.
    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;
  });

$（'form'）.submit（函数（）{//侦听所有表单提交。
var formID=$（this.prop（'id'）；//在这里获取表单id，并对其执行您喜欢的操作。
var cadena=$（this.serialize（）；
$.get（'ReassignPreg.php？cadena='+cadena，函数（第2行）{
var text=row2；
var obj=JSON.parse（文本）；
var imagen=''
$（“#PregBox00”）.html（imagen）
$（“#PregBox01”）.html（obj.Clase）
$（“#PregBox02”）.html（对象定义）
$（“#PregBox03”）.html（obj.Tipo）
});
返回false；
});

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

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

$（文档）.ready（函数（）{
$（“[id^=Form]”。关于（'submit'，函数（e）{
e、 预防默认值（）；
var _form=this.id.slice（-1）；//0、1等
var cadena=$（this）.serialize（）+'&form='+\u form；
$.get（'ReassignPreg.php？cadena='+cadena，函数（行）{
var image=$（'
现在，服务器上有一个
form
键，其中包含表单的编号，例如，在PHP中，您可以通过
$\u get['form']获得该编号
等等。
你可以用相同的表单名隐藏文件谢谢！几分钟内有这么多答案，你们太棒了。我先试试adeneo选项。谢谢！为了完整起见，需要替换adeneo代码：$（“#PregBox”+#form++“1”）.html（obj.Clase）；by$（“#PregBox”+#form++“1”）.html（row.Clase）；及so@user1726522-是的，我忘了更改，现在编辑，谢谢！
$(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');
    });
});