Ajax回调不起作用

Question

我似乎无法从这个代码中实现回调，但是我收到了一个响应。这只是一个简单的测试，有人知道为什么它不能按照我的想法运行吗？

<script type="text/javascript">
$(document).ready(function(e) {
    $("button").click(function() {
        var msg = $("#txt").val();
        $.post(
            "http://localhost/bot.php",
            {msg: msg},
            function(data,status) {
                $("p").text(data);
            }
        );
    });
});
</script>

我需要翻译的内容是：PHP，还有谁能推荐一个好的JavaScript工具来帮助我找到错误？

<?php

class ai
{
    private $msg;

    public function __construct($msg)
    {
        $this->msg = $msg;
    }

    public function respond()
    {
        switch($this->msg)
        {
            case "hi":
                echo "Hello Mr Brown How are You";
                break;
            case "fine":
                echo "Good to hear Did you know Zanda hard Coded me?";
                break;
            case "im fine":
                echo "Good to hear Did you know Zanda hard Coded me?";
                break;
            default:
                echo "??????????????????????????????" .
                     "That means i was extra rush prototype.......i cant answer that";
        }
    }
}

$talk = new ai($_POST['msg']);
$talk->respond();

?>


<div class="box">
<p>text</p>
<textarea id="txt"></textarea>
<button>click</button>
</div>

这是尽可能简短的HTML代码

- Alex_Nabu

---

使用Chrome浏览器并按下Control+Shift+J，即可使用内置的代码调试和网络跟踪工具。 - Paul

但在Chrome中它显示“XMLHttpRequest无法加载http://localhost/bot.php。起源null不被Access-Control-Allow-Origin允许。” - Alex_Nabu

请提供演示或更多信息。 - Hadi Mostafapour

火狐浏览器的Firebug显示请求正常，但服务器没有响应......是的，如果我显式调用bot.php，它会给我默认消息。 - Alex_Nabu

请查看http://pastebin.com/7wfyAidG，它在我的本地服务器上完美运行。另外，请注意如何区分ajax请求？ - Prasanth

Answer 1

在这里尝试的另一件事是将您的$.post更改为$.ajax，以便您可以指定错误回调。无论如何，$.get，$.post等仅是$.ajax的简写。尝试像这样：

("button").click(function() {
    var msg = $("#txt").val();
    $.ajax(
        url: "http://localhost/bot.php",
        data: {msg: msg},
        dataType: 'jsonp',
        success: function(data,status) {
            console.log(data, "returned with status:", status);
        },
        error: function(obj, status, error){
            console.log("Error!", obj, status, error);
        }
    );
});

仅仅因为你收到了一个200响应，并不意味着一切都正常工作。这只是说POST请求成功了。你需要检查响应文本，看是否有任何错误返回。

编辑：添加dataType: 'jsonp'到请求中。

- mattfieldy

---

非常感谢，没有你的帮助我无法解决这个问题。 - Alex_Nabu

Answer 2

看起来这是由于同源策略和MDN文档造成的。

端口号由浏览器单独保存。任何调用 setter 的操作，包括 document.domain = document.domain 都会导致端口号被覆盖为 null。因此，只在第一个中设置 document.domain = "company.com" 就不能使 company.com:8080 与 company.com 通信。必须在两个中都设置，这样端口号都为 null。

这就是你在回复中所说的获取到 null 的原因。

尝试添加 datatype:"jsonp"。它应该像这样工作。

$(document).ready(function(e) {
    $("button").click(function() {
        var msg = $("#txt").val();
        $.post(
            "http://localhost/bot.php",
            {msg: msg},
            function(data,status) {
                $("p").text(data);
            },
            dataType:"jsonp"
        );
    });
});

更多阅读在这里。

希望能帮到你。

- woofmeow

---

当我读到你的评论时，我意识到了我的答案。正如电脑所说的那样，我从桌面加载HTML文件，从服务器加载PHP文件。因此，正如你所说的，HTML将具有空的来源，因为它被我的服务器覆盖。 - Alex_Nabu