使用 .on("submit",

Posted 2023-03-14

【中文标题】使用 .on("submit",

【英文标题】：Jquery Ajax form using .on("submit",

【发布时间】：2012-01-27 01:42:45

【问题描述】：

我有一个页面，上面有几个 html 表单。下面是通过 ajax 调用提交表单的 jquery 代码。当提交内容 div 中的任何表单时，它确实会进行 ajax 调用。即使在通过 ajax 重新加载表单后它也会触发。我不知道如何将表单数据传递给处理函数。任何帮助将不胜感激。

澄清： var formData = $(this).serializeArray();不管用。 formData 没有从表单文件中获取值。

$.ajaxSetup(
  url: "ajax.php",
  type: 'POST',
  contentType: "application/json; charset=utf-8",
  datatype: 'json',
  cache: false,
  timeout : 5000
);
$("#content").on("submit", function(e) 
  e.preventDefault();
  var formData = $(this).serializeArray();
  $.ajax(
    data: formData,
    success: function(jsonData) 
        htmlData = jQuery.parseJSON(jsonData);
        $.each(htmlData, function(id, data)
            $("#"+id).html(data);
        );
    
);
;

更新：

如果我改变了

$("#content").on("submit", function(e)

到

$("#content").on("submit", "form", function(e)

表单数据被序列化，ajax 函数按预期工作。新的问题是如果表单不完整并且被重新加载（通过ajax）到内容分区中，提交事件不再触发该功能。我试图配置 .on() 以像 .live() 在早期版本的 jquery 中那样运行。它会在 ajax 重新加载后重新绑定提交事件。在这种情况下， .on() 不会重新绑定。希望这有点道理！

【问题讨论】：

请再解释一下你的问题，我不明白你的描述出了什么问题。

你的意思是如何访问服务器或客户端（javascript/jquery）上的数据？

$(this).serializeArray();没有拾取表单数据。所以 formData 里面什么都没有。

如果序列化有问题，也向我们展示 HTML。

我也很好奇如何使用.on函数来提交动态加载表单的事件

【参考方案1】：

您需要通过 $_POST 全局变量获取 ajax.php 中传递的变量。

例如：

$myVar = $_POST['field_name'];

【讨论】：

这不是问题。 ajax 函数没有获取表单数据以将其发送到服务器。