如何从使用AJAX提交的表单（与其他具有相同类名的表单）中选择和提取数据？

Question

我已经编写了一个代码（我必须承认这是一个工作进度），该代码将表格与表格中的每个单元格分别包装在一起。 表单将通过按Enter提交。因此，表中的每个单元格都是一个小型表单，并且单元格的数量可能会有所不同，具体取决于数据库变量。

简而言之，这是创建表单的代码部分：

$output .= '
                    <td><form class="submit_results" onsubmit="return submit_results();"><input class="hidden" name="result_id" value="'.$result_id.'"><input class="hidden" name="m_analysis_id" value="'.$row2.'"><input class="hidden" name="order_id" value="'.$order_id.'"><input class="hidden" name="sample_id" value="'.$sam_id.'"><input name="result" placeholder="'.$input4['m_analysis'].'" value="'.$input5['result'].'"><input class="hidden" type="submit"></form></td>'; 

现在，我希望能够提交表单，即用户使用AJAX分别向单元格中输入值的单元格，如下所示：

    function submit_results() {
     $.ajax({
      type: "POST",
      url: "../server/insert_tests.php?submit_results",
      data: $('form').serialize(),
      success: function(message){
        $('#success').html(message).fadeIn('fast').delay(3000).fadeOut('slow');

        var display_analyses = $("#order_id").val();
        var url4 = "../server/insert_tests.php?display_full_results=";

        $.ajax({
          type: "GET", 
          url: url4 + display_analyses,             
          success: function(data) {
            $("#full_table_results").html(data);
          }
        });
      }
    });
     event.preventDefault();
   }

但是， data: $('form').serialize(),部分代码仅从最后一个form获取数据。 我知道为什么会这样，这可能是由于代码无法区分表单和提交表单之间的事实。 使用类也不起作用，如果表单将在多个位置生成，则不能使用id。 我努力了：

$(this).closest('form').serialize(),

但是没有运气。 有人可以提供解决此问题的方法吗？

Answer 1

代替使用内联事件处理程序，而使用jQuery的事件处理语法。

去掉

onsubmit="return submit_results();

并使用事件处理程序替换“ submit_results（）”函数，该事件处理程序将附加到具有相同类的所有表单上：

$(".submit_results").submit(function(event) { ... });

然后在其中，当处理程序执行时，实际提交的表单将由this表示。 因此，您可以使用$(this).serialize()从提交的特定表单中捕获数据。

完整的代码：

PHP：

$output .= '<td><form class="submit_results"><input class="hidden" name="result_id" value="'.$result_id.'"><input class="hidden" name="m_analysis_id" value="'.$row2.'"><input class="hidden" name="order_id" value="'.$order_id.'"><input class="hidden" name="sample_id" value="'.$sam_id.'"><input name="result" placeholder="'.$input4['m_analysis'].'" value="'.$input5['result'].'"><input class="hidden" type="submit"></form></td>';

JS（确保它在$(document).ready() { ... })块中），以便它在呈现元素之前不会尝试绑定事件）：

$(".submit_results").submit(function(event) {
  event.preventDefault();

  $.ajax({
      type: "POST",
      url: "../server/insert_tests.php?submit_results",
      data: $(this).serialize(),
      success: function(message){
        $('#success').html(message).fadeIn('fast').delay(3000).fadeOut('slow');

        var display_analyses = $("#order_id").val();
        var url4 = "../server/insert_tests.php?display_full_results=";

        $.ajax({
          type: "GET", 
          url: url4 + display_analyses,             
          success: function(data) {
            $("#full_table_results").html(data);
          }
        });
      }
    });
});

注意：除了使您所需的功能更容易工作之外，使用不显眼的事件处理程序（而不是内联的事件处理程序）通常被认为是现代Web开发中的最佳实践，因为它可以使代码与表示更好地分离，并且使代码更清晰，更可追踪的（您不必在HTML中四处寻找事件处理程序，您可以在JS中的一处看到所有事件处理程序），这应该有助于调试和持续维护。