jQuery ajax函数返回错误

Question

说实话，我对jQuery是一个完全的新手，现在我卡住了。我想把数据从我的HTML表单发送到php，它将数据添加到数据库并返回一些值，我想在我的原始HTML上显示这些值。这是我的代码：

$.ajax({
  type: "POST",
  url: "http://mysite.com/process.php",
  data: { data: mydata },
  cache: false,
  dataType: "text",
  error: function(jqXHR, textStatus, errorThrown){
        alert(jqXHR.status);
        alert(jqXHR.statusText);
        alert(jqXHR.responseText);
    },
  success: function(data){
        getContentBox().innerHTML = data;
}
});

它返回一个jqXHR对象，其中status=0，statusText="error"且responseText为空。但是我的php似乎工作正常，因为我看到我的数据插入了我的数据库。我做错了什么？

任何帮助将不胜感激。提前致谢！

编辑： Chrome控制台显示 XMLHttpRequest无法加载http://mysite.com/data.php。源“http://www.mysite.com”未被Access-Control-Allow-Origin允许。

- nxu

---

你的 PHP 脚本发送了哪些头部？输出是什么？ - Fender

你有没有查看Firebug或其他工具中的请求/响应？ - Jay Blanchard

PHP只需简单地打印文本（print $data;）。刚刚用Chrome查看了请求： 状态文本：（已取消） 类型：application/x-www-form-urlencoded; charset=UTF-8 - nxu

你可以尝试将URL更改为http://www.mysite.com/process.php。跨域可能会非常挑剔，例如：www.domain.com无法访问sample.domain.com。 - ShelbyZ

嗨，您不需要像在老式讨论论坛中那样大喊“已解决”：）只需在时间允许的情况下发布答案并将其标记为已接受即可。它将被解释为“已解决的问题”。同时，您可以在问题上发表评论，指出它已经解决，并表示稍后会发布答案。 - BalusC

Answer 1

ShelbyZ的评论带领我找到了解决方案：

当我尝试使用绝对URL时，浏览器拒绝执行请求，我必须将其写成相对路径。

$.ajax({
  type: "POST",
  url: "process.php",
  data: { data: mydata },
  cache: false,
  dataType: "text",
  error: function(jqXHR, textStatus, errorThrown){
        alert(jqXHR.status);
        alert(jqXHR.statusText);
        alert(jqXHR.responseText);
    },
  success: function(data){
        getContentBox().innerHTML = data;
}
});

谢谢！

- nxu

Answer 2

尝试这个（你忘记了关闭一个括号）：

$.ajax({
  ...
  success: function(data){
    getContentBox().innerHTML = data;
  }
});

- Olivier G

---

啊，没错，在我的脚本里它是存在的，只是一个复制粘贴错误。不过还是谢谢你。 - nxu

Answer 3

为什么不使用jQuery内置的post函数来简化这个过程呢？例如：

            $.post('http://mysite.com/process.php', mydata, function(data) {
                if (data.status == 1) {
                    getContentBox().html() = data;
                } else {
                    alert(data.status);
                    alert(data.statusText);
                    alert(data.responseText);
                }
            });

我不确定你的状态响应是什么，所以你可能需要编辑一下，但如果你把它放在$('这里放表单').submit(function() {POSTCODEHERE});里面，它就能工作了。

- Clark T.

Answer 4

我遇到了同样的问题。Ajax函数被绑定到<form>内部的按钮(type="submit")上，所以每次我按下这个按钮时我的页面都会重新加载，error函数会起作用而不是success函数。我真的不知道这是如何相关的，但当我在按钮的事件监听器中添加event.preventDefault()后，它就可以正常工作了。

- Nick Dekhtiarenko