我正在尝试实现一个AJAX调用.我做错了什么

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格式。

感谢您的帮助。非常感谢。

更新！！

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的示例不起作用，因为它违反了同源策略（除非您将在谷歌页面的浏览器控制台中运行代码）。尝试用您的本地地址替换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（）回调函数。

尽管如此，我还是把你的代码改写了一下。如果在运行时收到一条警报（"）消息，则意味着您的xml请求运行良好。如果您没有看到警报（''）消息。这意味着您的xml请求返回了一个http 404错误，这意味着您的请求URL不正确。尝试将你的请求URL更改为你知道不会给你404错误的内容，比如"http://www.google.com"。如果它有效，并且您收到了警报消息，那么唯一的问题是您的localhost:8080 url是一个错误的url。

此外，在myFunction回调函数中，javascript将换行符视为一行代码的末尾。所以你必须在同一行写一个"="号的作业，并且没有换行符。由于这个javascrit原则，您也不需要分号"；"在一行的末尾，就像在PHP脚本中一样。

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

最后，如果myFunction（）回调函数中有错误，浏览器检查器将不会以有用的方式报告它，而是会抛出一个错误，指出xmlhttp.onreadystatechange=function（）｛｝是罪魁祸首，因为浏览器认为这是错误所在的位置（即调用函数），即使真正的错误在myFunction（）回调函数中。使用我对您的ajaxCall（）｛…｝代码的编辑，并使用有效的url，您可以确信ajax调用有效，并且您的myFunction（）回调函数中存在任何错误。

最后，你必须小心你的回调函数，因为有太多的东西可能会破坏它。例如，如果你的网页上没有你提供的id的html元素，document.getElementById（）会导致错误。此外，如果您从ajax调用返回的JSON缺少您提到的任何属性（城市或纬度），那么innerHTML很可能会被设置为"未定义"。但有些浏览器可能会将丢失的json属性视为错误，而不是在尝试调用它们时只说它们是"未定义的"。

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
*/
}