使用 $('.ajax_form').ajaxForm(); 的奇怪行为

Question

这是我第一次在像下面这样的类上应用 jquery ajaxForm

<form class="ajax_form"...><input type="text" name="q" /><input type="submit" /></form>
<form class="ajax_form"...><input type="text" name="q" /><input type="submit" /></form>

<script>
$('.ajax_form').ajaxForm({
  dataType: 'json',
  error: ajaxErrorHandler,
  success: function(response) { // do some ui update .. }
});
</script>

现在，在 Ajax 调用完成后，我总是进入错误部分，尽管 firebug 没有报告任何错误响应，但不确定我做错了什么。

Answer 1

在这种情况下，这可能合适，也可能不合适，但我会提供它，因为当我寻找类似问题的答案时，它对我很有用。 如果您在 Firefox 中提交带有文件上传功能的“multipart/form-data”表单，jquery.form 将使用 iframe 提交表单。 如果返回数据的 Content-Type 是 text/plain，则 iframe 会将结果文本包装在

 中。   即使 Firebug 正确显示响应甚至 json，它也会扰乱 jquery json 解析器并给你一个解析器错误。

在我弄清楚之前，这给我带来了无尽的头痛（在这个帖子的帮助下：http://www.extjs .com/forum/archive/index.php/t-17248.html）。

我的例子的答案是确保响应内容类型是“text/html”（这是违反直觉的，至少对我来说）。

Answer 2

@c.sokun：这里使用类不应该成为问题，只要只有 1 个表单使用该类。 同一页面上具有相同类的两个表单肯定会导致出现问题（参考您的代码...或者是拼写错误？）

您是否尝试过使用 FireBug 并检查传递的参数和返回的值？ 那应该是第一个！

Answer 3

问题出在你的 json 数据上。 这些可能格式不正确并且无法解析。 在这种情况下，不会调用 success 函数。

如果您打印错误回调的消息，您可以验证这一点。 使用以下代码：

url = url + "?" + $(".ajaxForm").serialize();
$(".ajaxForm").ajax({url: url, dataType: "json", type : "post",
                    success: function(response) {},
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log(textStatus);
                        console.log(errorThrown);
                    }});

打印输出之一应该类似于“解析器错误”。

Answer 4

我认为您需要表单的 url 和 post 类型才能将数据发送到某处？

这就是他们在 jquery.com 上的设置方式：

$("#myform").ajaxForm({
   url: "mypage.php",
   type: "POST"
 });

Answer 5

ajaxErrorHandler 是否在其他地方定义？
我尝试了你的代码，它运行得很好。 您使用什么版本的 jQuery 和 jQuery 表单？

这是我尝试过的代码。 与此测试位于同一目录中的包含“{test:'hello world'}”的名为“test.json”的文件：

<script type="text/javascript" src="http://malsup.com/jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://malsup.com/jquery/form/jquery.form.js?2.28"></script>

<form class="ajax_form" action="test.json" method="post"><input type="text" name="q" /><input type="submit" /></form>
<br/>
<form class="ajax_form" action="test.json" method="post"><input type="text" name="q" /><input type="submit" /></form>

<script>
$('.ajax_form').ajaxForm({
  dataType: 'json',
  error: function() {alert("error");},
  success: function(response) {alert(response.test);}
});
</script>

Answer 6

好吧，我检查了 API，没有找到任何对名为“错误”的选项字段的引用，所以可能就是这个原因。 检查此处。