jQuery AJAX 调用在 Webkit 中不起作用答案

【问题标题】：jQuery AJAX call not working in WebkitjQuery AJAX 调用在 Webkit 中不起作用
【发布时间】：2010-05-04 17:17:32
【问题描述】：

我在基于 Webkit 的浏览器（Safari 和 Chrome - 我正在 Mac 上测试）遇到了一个奇怪的问题，我不确定是什么原因造成的。这是我创建的复制问题的小脚本：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
function doRequest() {
  document.test.submit();
  $.ajax({
    type: "GET",
    cache: false,
    url: 'ajax.php?tmp=1',
    success: doSuccess
  });
}
function doSuccess(t_data,t_status,req) {
  alert('Data is: '+ t_data +', XMLHTTPRequest status is: '+ req.status);
}
</script>
</head>

<body>
<form name="test" method="post" action="ajax.html" enctype="multipart/form-data">
<input type="file" name="file_1">
<br><input type="button" value="upload" onclick="doRequest();">
</form>
</body>
</html>

ajax.php 是：

<?php
echo $_REQUEST['tmp'];
?>

这在 Firefox 上可以正常工作，但在 Safari 和 Chrome 上 XMLHTTPRequest 状态始终为“0”。如果我删除这一行：

document.test.submit();

然后它可以工作，但是表单当然没有提交。我尝试将表单提交按钮从“按钮”更改为“提交”，但这也阻止了它在 Safari 或 Chrome 上运行。

我想要完成的是：

提交表格
调用另一个脚本以获取通过表单上传的文件的状态（用于小型上传进度表）。

非常感谢任何帮助 - 我希望这只是我不熟悉的一个怪癖。

谢谢！

布赖恩

【问题讨论】：

标签： php jquery ajax webkit google-chrome

【解决方案1】：

简单地说：您不能使用 AJAX 上传文件。

有一些不错的插件，例如 jquery form 可以自动处理这个问题（通过创建隐藏的 iframe 并执行真正的文件上传）。

我认为 FireFox 有一个native file upload API，但如果你想要一个跨浏览器解决方案，你需要看看一些插件。使用flash upload 是另一种解决方案。

【讨论】：

我没有通过 AJAX 上传文件 - 文件上传是在 HTML 表单中处理的 - AJAX 调用是对 PHP 脚本的单独调用，该脚本反过来会监控上传。我已经简化了上面的例子来说明这个问题——在“现实世界”中，这个表单提交给一个 perl CGI 脚本，AJAX 调用发送到一个 PHP 脚本，该脚本反过来监控 perl 脚本，因为它处理文件上传.谢谢！ - 布赖恩
一旦您提交表单，浏览器将重定向到 ajax.html 并且脚本可能会停止执行，因此在提交表单后尝试执行 ajax 调用是没有用的。
文件上传后重定向将发生 - 这是正确的，但是在提交表单时（因此正在上传文件）它不会被重定向。例如，上传一个 100mb 的文件可能需要几分钟的时间——那时我想通过 AJAX 查询一个 PHP 脚本并获取进度。这适用于 Firefox 和 IE，所以我想知道为什么 AJAX 调用只在基于 Webkit 的浏览器中失败。据我所知，document.form.submit 没有阻塞，因为如果您上传足够大的文件，提交需要 10 秒左右，您会看到 AJAX 调用是即时的。
原来这很可能是一个 Webkit 错误：bugs.webkit.org/show_bug.cgi?id=23933 我应该在发布之前进行更多搜索。现在尝试寻找解决方法。 - 布赖恩

【解决方案2】：

我在开发类似的上传检查工具1 时的经验是，您应该同时使用success: .. 和complete: ..。他们可能会在你的代码中做同样的事情，你可以让他们调用相同的函数。 complete: 在请求完成时被调用，success: 在请求成功时被调用。因此也许：

function doRequest() {
  document.test.submit();
  $.ajax({
    type: "GET",
    cache: false,
    url: 'ajax.php?tmp=1',
    complete: doSuccess,
    success: doSuccess
  });
}

【讨论】：