通过 ajax 提交多个表单

Question

我有一个 while 循环，可以为事件重复一个表单。我试图使用运行 mysql 查询表单 ajax 来防止在提交时重定向页面。我想弄清楚如何传递似乎不起作用的数据，因为每个表单都有相同的 class 或 id.

image of the table with submit button for each row 表格

<form action="status_change.php" method="post" class="ajax">
      <div class="form-group"> 
           <input type="hidden" class="form-control"  name="incidentnum" value="' . $row_aincidents['incidentnumber'] . '">
</div>
<div class="form-group"> 
<input type="hidden" class="form-control"  name="unit" value="' . $row_aincidents['unitid'] . '">
 </div>
 <div class="form-group"> 
 <input type="hidden" class="form-control"  name="status" value="3">
 </div>

 <button type="submit" class="btn btn-primary btn-sm">STAMP</button>
 </form>

Java 脚本

      $('form.ajax').on('submit', function () {

          var that = $(this),
                  url = that.attr('action'),
                  type = that.attr('metod'),
                  data = {};

          that.find('[name]').each(function (index, value) {
              var that = $(this),
                      name = that.attr('name'),
                      value = that.val();

              data[name] = value;

          });

          $.ajax({
              url: url,
              type: type,
              data: data,
              success: function(response) {
                  console.log(response);
              }
          });
          return false;
      });

Answer 1

我认为您只是出现了一些错别字和错误。您需要指定方法（并且您在获取该表单属性时遇到了错字）。您还将该方法设置为 type 选项。

jQuery ajax 调用的默认方法是 get，因此如果您希望通过 post 获取任何数据服务器端，则不会。

  $('form.ajax').on('submit', function () {

      var that = $(this),
          url = that.attr('action'),
          type = that.attr('method'),
          data = {};

      that.find('[name]').each(function (index, value) {
          var that = $(this),
              name = that.attr('name'),
              value = that.val();
          data[name] = value;
      });

      $.ajax({
          url: url,
          method: type,
          data: data,
          success: function(response) {
              console.log(response);
          }
      });

      return false;

  });

设置您期望从服务器返回的数据类型也是一个好习惯。 $.ajax 的默认预期数据类型是猜测（jQuery 可以检测到 json、xml、html 和脚本）。您可以使用 dataType 选项指定预期的数据类型。

在同一表单中使用相同名称的输入也不是一个好习惯。在你的情况下，因为你有多种形式，所以这不是问题。

您可以阅读更多关于 $.ajax here。

通过 ajax 提交多个表单

Submit multiple forms via ajax

forms

ajax

jquery

form-submit