11

我在 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 标题

4

8 回答 8

8

为防止浏览器触发 .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);
            }
        });

完美运行。

于 2010-08-09T13:19:38.853 回答
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 标签中，所以我也需要在我的结果函数中去掉它们。

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

于 2010-05-03T05:44:17.230 回答
2

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

于 2011-01-06T06:03:29.297 回答
2

这个插件将允许您使用 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
});
于 2010-05-03T03:37:02.267 回答
1

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

于 2010-05-03T02:12:57.690 回答
0

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

于 2010-05-03T02:38:25.647 回答
0

也许它有帮助

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

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

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

不是很好，但工作

于 2010-06-20T22:13:13.660 回答
0

Easy way:

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

于 2018-10-09T17:22:35.890 回答