多部分表单 POST 导致 Firefox 提示 JSON 保存答案

【问题标题】：Multipart Form POST Causes Firefox To Prompt JSON Save多部分表单 POST 导致 Firefox 提示 JSON 保存
【发布时间】：2012-04-06 14:37:33
【问题描述】：

我有一个问题发生在 IE 8 和 Firefox 6.0 但不是 Chrome 17.0.9。当我在下面发布 frmMain 时，我将它发送到一个测试页面，该页面只返回一个带有 ContentType: application/json; charset=utf-8 的简单 JSON 字符串。问题是 IE 和 FF 会提示我保存从服务器返回的 JSON，而不是在我的 jquery 代码中点击成功方法。但奇怪的是，如果我在发布的表单上省略了<input name='File_1' type='file' />，那么 IE 和 FF 不要提示我保存我的 JSON 并且我的 jquery 成功代码会触发。

因此，似乎发布的内容（在 IE 和 FF 中）与浏览器对返回的有效负载的反应方式有关。通过 Fiddler，我验证了在每种情况下返回的有效负载完全相同。

有什么想法吗？

找到的解决方案：请参阅下面的答案。据我所知，“text/html”是执行 jquery/ajax/json 时返回的最佳跨浏览器内容类型。

代码

<script>
     $(function () {
         $('#btnSave').click(function () {
             $('#frmMain').ajaxSubmit({
                 success: function (data, statusText, xhr, $form) {
                     alert('test success');
                 },
                 fail: function (data, statusText, xhr, $form) {
                     alert('test fail');
                 }
             });
         });
     });
</script>
<body>
     <form id='frmMain' action='/test' method='post'>
              <!--Omit the file input below to make it work-->
          file: <input name='File_1' type='file' /><br />

          name: <input name='json' value='{"id":5}' /><br />

          <input type='button' id='btnSave' value='Save' />
     </form>
</body>

调用文件上传（导致失败）：

无需上传文件即可调用（有效）：

在 IE 中看起来像什么失败：

FF 中的失败情况：

【问题讨论】：

您是否尝试在使用file 字段发帖时将enctype="multipart/form-data" 添加到<form>？理论上它不应该对结果产生影响，但值得尝试所有可能性。
谢谢@Rory，这似乎没有帮助，但好主意。我正在使用的插件已经在 HTTP 帖子中添加了该插件（请参阅 Fiddler）。

标签： jquery json internet-explorer firefox multipartform-data

【解决方案1】：

经过大量的反复试验，我遇到了this SO post，@ItsJason 建议将服务器的 ContentType 设置为“text/html”。这解决了问题，我的 jQuery 代码在调用我的回调方法时仍然将返回的有效负载识别为 JSON。所以吸取了教训：为了在ajax回发期间将JSON返回到jquery时实现跨浏览器的完全兼容性，不要使用“application/json”，使用“text/html”！！

【讨论】：

对于 IE，我得到了 <pre> 标签，所以我必须在解析为 JSON 之前手动删除它们。对于那些面临这个问题的人来说，仅供参考。

【解决方案2】：

可能需要指定数据的返回类型为json。

看起来您正在使用插件。无论如何，这里有一些关于指定返回数据类型的信息： http://jquery.malsup.com/form/#options-object

【讨论】：