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


I am trying to implement an AJAX call. What am I doing wrong?

这是我的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;
}

这就是即兴代码的样子。仍然不起作用。

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');
}

在我的第一个答案之后,你的代码更新看起来很匆忙,我认为这会让问题变得有点困难。.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
*/
}