Question

这是我的HTML文字：

<input type="text" class="resizedsearch" name="searchdb">
<button id="submit" onclick="ajaxCall()">Search!</button>

这是Javascript：

ajaxCall()
{
    var xmlhttp = new XMLHttpRequest();

    var url = "http://localhost:8080/CSE%205335%20Project%20One/userInfo.php";

    xmlhttp.onreadystatechange=function()

    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
        {
            myFunction(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", url, true);
    xmlhttp.send('searchdb');

    function myFunction(response)
    {
        var obj = JSON.parse(response);

        document.getElementById("democity").innerHTML =
        obj.city;

        document.getElementById("demodes").innerHTML =
        obj.description;

        document.getElementById("latlon").innerHTML =
        obj.latitude + "," + obj.longitude;

    }
}

这就是我试图显示我从PHP文件中收到的响应的地方：

<b><font size="24" face="Cambria"><p id="democity"></p></font></b>
<font size="6" face="Cambria"><p id="demodes"></p></font>
</br>

PHP文件的输出存储在$ outp中，它是JSON格式。

任何帮助表示赞赏。谢谢。

!! UPDATE !!

function ajaxCall()
{
var xmlhttp = new XMLHttpRequest();
var url = "http://localhost:8080/CSE%205335%20Project%20One/userInfo.php";

xmlhttp.onreadystatechange=function() 
{

xmlhttp.open("GET", url, true);
xmlhttp.send('searchdb');

    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
    {
    myFunction(xmlhttp.responseText);
    }
}
}

function myFunction(response)
{
var obj = JSON.parse(response);

document.getElementById("democity").innerHTML =
obj.city;

document.getElementById("demodes").innerHTML =
obj.description;

document.getElementById("latlon").innerHTML =
obj.latitude + "," + obj.longitude;

}

这是即兴代码的外观。仍然没有工作。

Answer 1

FactoryAidan的示例不起作用，因为它违反了同源策略（除非您在Google页面上的浏览器控制台中运行代码）。尝试使用您的本地地址替换http://www.google.com。我通过一些修改测试了代码并且它可以工作，或者至少提供警报，因此调用该函数。这是：

function ajaxCall(){
    var xmlhttp = new XMLHttpRequest();
    var url = "http://localhost:8080"; /* but make sure the url is accessible and of same origin */

    xmlhttp.onload=function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            myFunction(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", url, true);
    xmlhttp.send('searchdb');
}


function myFunction(response){
    alert('I made it here');
}

Answer 2

我的第一个答案后的代码更新看起来像是在急速完成，我认为这个问题有点困难。 .open（）和.send（）方法最终在.onreadystatechange函数定义中，但它们必须在外面。你的第一个没有这些安置问题。我在下面编写的代码具有您确切的构建块，但没有放置问题，因此您应该能够遵循它与示例代码的匹配方式。我也测试了它，它成功地发送和接收数据并成功调用myFunction（）回调函数。

尽管如此，我接受了你的代码并重写了一下。如果您在运行时收到警报（＆＃39;＆＃39;）消息，则表示您的xml请求工作正常。如果您没有看到提醒（＆＃39;＆＃39;）消息。这意味着您的xml请求返回了一个http 404错误，这意味着您的请求URL是错误的。尝试将您的请求网址更改为您知道赢得的内容但不会给您404错误，例如＆＃39; http://www.google.com＆＃39;。如果它工作并且您收到警报消息，那么唯一的问题是您的localhost：8080 url是一个坏网址。

此外，在myFunction回调函数中，javascript将换行符视为一行代码的结尾。因此，您必须编写使用＆＃39; =＆＃39;在同一行上签名，没有换行符。由于这种javascrit原则，你也不需要分号＆＃39 ;;＆＃39;像在PHP脚本中一样在单行的末尾。

最后，错误的一个重要原因可能是JSON.parse（）调用。收到的数据必须是有效的json字符串。因此，如果您调用的URL返回除纯json以外的任何内容...您的myFunction（）回调函数将在JSON.parse（）命令中断开。

最后，如果你的myFunction（）回调函数出现错误，你的浏览器检查器将不会以有用的方式报告它，而是抛出一个指向你的xmlhttp.onreadystatechange = function（）{}的错误。罪魁祸首，因为这是浏览器认为错误所在的位置（作为调用函数），即使真正的错误在myFunction（）回调函数中。使用我对ajaxCall（）{...}代码和有效网址的编辑，你可以肯定ajax调用是有效的，你有的任何错误都在你的myFunction（）回调函数中。

最后，你必须小心你的回调函数，因为有很多东西可以打破它。例如，如果您的网页上没有包含您提供的ID的html元素，document.getElementById（）将导致错误。此外，如果您从ajax调用收到的JSON缺少您提到的任何属性（城市或纬度），则innerHTML可能会被设置为“未定义”。但是有些浏览器可能会将丢失的json属性视为错误，而不仅仅是说它们是未定义的＆＃39;当你试图打电话给他们时。

function ajaxCall(){
    var xmlhttp = new XMLHttpRequest();
    var url = "http://www.google.com";

    xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                myFunction(xmlhttp.responseText);
            }
    }

    xmlhttp.open("GET", url, true);
    xmlhttp.send('searchdb');
}


function myFunction(response){
    alert('I made it here')
/*
    var obj = JSON.parse(response);

    document.getElementById("democity").innerHTML = obj.city

    document.getElementById("demodes").innerHTML = obj.description

    document.getElementById("latlon").innerHTML = obj.latitude + "," + obj.longitude
*/
}

我正在尝试实现一个AJAX调用。我究竟做错了什么？

2 个答案: