jQuery ajaxForm 返回 .json 文件答案

【问题标题】：jQuery ajaxForm returning .json filejQuery ajaxForm 返回 .json 文件
【发布时间】：2011-02-14 21:29:58
【问题描述】：

我在 Rails 中有一个模型创建表单，我还通过 ajax 返回 JSON。到目前为止，我的代码如下所示：

$('#new_stem').ajaxForm({ //#new_stem is my form
  dataType: 'json',
  success: formSuccess
});

function formSuccess(stemObj) {
  //does stuff with stemObj
}

我有一个带有文件上传器的多部分表单（但我不确定这是否相关）。

当我提交表单时，它工作正常（我的模型正在正确创建并呈现为 json），但不是由 formSuccess 函数处理 json，而是提示下载“stems.json”（路径我的词干创建操作）在 Firefox 中。

什么会导致这种情况发生，什么可以解决它？不知道这是否是问题的一部分，但我的表单中没有提交按钮，我有一个链接到点击处理程序调用 $('#new_stem).submit()

谢谢大家！

编辑：Firebug 告诉我标题包含以下内容：

Etag        "b53e5247e7719cf6b1840e2c6e68781c"
Connection      Keep-Alive
Content-Type    application/json; charset=utf-8
Date        Mon, 03 May 2010 02:19:31 GMT
Server      WEBrick/1.3.1 (Ruby/1.8.7/2010-01-10)
X-Runtime       241570
Content-Length  265
Cache-Control   private, max-age=0, must-revalidate

加上一个 cookie 标头

【问题讨论】：

我认为这与文件上传方面有关。如果我使用 Firefox 直接导航到 json 文件，则会打开相同的提示，并且我知道为了通过 ajax 上传文件，必须创建一个单独的 iframe 来提交表单。我认为 iframe 之后只是导航到该 json 文件，firefox 尝试将其作为下载处理。我可以更改任何服务器端选项以使其认为不是下载吗？

标签： jquery ruby-on-rails json ajaxform

【解决方案1】：

为防止浏览器触发 .json 文件的下载，请将 Content-type 标头设置为“text/html”。

PHP：

header("Content-type: text/html");

ASP.NET MVC：

return Json(obj, "text/html");

在javascript中你需要解析文本结果，像这样：

$(".addform").ajaxSubmit({
            url: "file.php",
            type: "POST",
            dataType: "text",
            iframe: true,
            success: function (text) {
                var data = $.parseJSON(text);
            },
            error: function (xmlRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });

完美运行。

【讨论】：

当您的响应包含字符 <（或在某些情况下为 &）时，这将导致问题，因为 HTML 解析器会正确地进行一些错误纠正。

【解决方案2】：

虽然不完全是我想要解决的问题，但我能够找到一个稍微不同的解决方案来满足我的需求！

由于 ajax 文件上传是通过 iframe 完成的，问题是 iframe 加载 .json 文件后，Firefox 将其解释为下载并打开下载提示。我很确定我可以通过一些服务器设置来防止这种情况发生，但我已经投入了足够的时间。

所以我所做的是将输出呈现为文本而不是 json，因为无论如何我实际上只是在钓鱼一个 ID 号。我的代码现在看起来像：

$(document).ready(function() {
  $('#continue-upload').click(function() {
    $('#new_stem').ajaxSubmit({
      dataType: 'text', //'json',
      success: formSuccess
    });
  });
});

我需要的 id 号也包含在 pre 标签中，所以我也需要在我的结果函数中去掉它们。

这就是我现在想要的，哇！

【讨论】：

【解决方案3】：

实际上，该插件的 ajaxSubmit 代码有点笨拙。要使 ajaxSubmit 工作（在撰写本文时），您的服务器必须将 JSON 数据返回为 content-type=text/html。该插件将自动拉出标记等（参见源代码）。我猜当他们试图让隐藏的 iframe 将 json 拉回来时，他们决定将 json 视为文本并将其从 iframe 中解析出来。

【讨论】：

【解决方案4】：

plugin 将允许您使用 ajax 提交 MultiPart 表单。

如果您想使用 Ajax 'success:' 选项，您必须使用 ajax 提交表单。目前您正在使用submit() 函数，它基本上只是以传统方式提交表单。您可以在下载文件或浏览器中看到 json 数据这一事实意味着这种情况正在发生。

您需要使用该插件（如果您需要 multipart 功能 - 否则只需使用常规 Ajax 功能）

有了这个插件，你可以这样使用它：

$("#SubmitButton").click(function() {

  $.ajaxFileUpload({
    url: serverurl,
    secureuri: false,
    fileElementId: elementId,
    dataType: 'json',
    success: function(data, status) {
      /* show success message */
    },
    error: function(data, status, e) {
      /* handle error */
    }
  });
});

如果你想在不上传文件的情况下进行，有一种更简单的方法。

$("#SubmitButton").click(function() {
  $.post('YOUR_URL', $("#FormName").serialize(), function(data) {
    alert(data.name); // John
  }, "json"); //specify return data is going to be json
});

【讨论】：

ajaxForm 插件确实允许文件上传，并且运行成功。我相信它也与 .submit() 事件挂钩，但我将点击处理程序更改为调用 .ajaxSubmit() 。不幸的是，同样的结果！
也要试试这个插件！
看起来这个插件不能让我控制我的帖子数据的结构。由于这是rails，因此需要以特定方式发送
check : stackoverflow.com/questions/670320/… -- 使用 $('#frmSearch').bind -- 这个人能够得到同样的东西。阅读页面上的正确答案。如果您使用 ajaxSubmit，我希望您也使用 - jQuery Form Plugin(jquery.malsup.com/form)。
现在在我看来提交不是问题，但 Firefox 处理返回的 .json 文件就好像它是一个下载文件（因为 ajax 上传是通过 iframe 完成的）。我需要想出一种方法让 firefox 在浏览器中打开它而不是下载

【解决方案5】：

听起来好像它的Content-Type 响应标头不正确，因此浏览器不知道如何处理它。应该是application/json。您可以使用Firebug 的Net 面板来确定实际的响应标头。

【讨论】：

我用firebug查看了传入的headers，其中包含Content-Type application/json； charset=utf-8
好的，我会更新问题以包含该问题。这是当下载提示意外弹出时人们首先会想到的问题之一。 Content-Disposition 怎么样？没有attachment?
标题看起来不错。我会在黑暗中拍摄：如果您将dataType 更改为jsonp 会怎样？然而，这通常只用于跨域 JSON 请求，但这会改变 JSON 的处理方式。
好像ajaxForm不支持jsonp
您终于通过将dataType 更改为text 来修复它。我觉得这很奇怪。其他浏览器呢？这不是一些 Firefox 配置问题吗？

【解决方案6】：

您是否取消了submit 事件的默认操作？听起来表单实际上正在被提交（在传统意义上——换句话说，Firefox 实际上正在导航到表单的action 中指定的页面）。

【讨论】：

据我所知，ajaxForm 已经处理好了。
啊——我从来没有用过 ajaxForm。也许启动Fiddler 看看是否生成了多个请求？

【解决方案7】：

也许有帮助

$('#cpFileUpload').ajaxForm({
        dataType: 'html',           
        success: function(data) {           
            eval(data);                 
            if (data.result == false) {
                alert('error on server side');
            } else {                
                // do what you want
            }
        }       
    });

并且在服务器端，输出必须是这样的（只有这个输出或者body标签内没有任何其他文本）

var data = {result: true, html: 'ok'}

不是很好，但工作正常

【讨论】：

【解决方案8】：

简单的方法：

$('#new_stem').ajaxForm({ dataType: 'text', complete: function(xhr) { data = JSON.parse(xhr.responseText); } });

【讨论】：