Fatal编程技术网
  • javascript/
  • Javascript 我的AJAX脚本没有给出任何输出

Javascript 我的AJAX脚本没有给出任何输出

javascript php ajax

Javascript 我的AJAX脚本没有给出任何输出,javascript,php,ajax,Javascript,Php,Ajax,index.php：- <!DOCTYPE html> <html> <head> <script src="food.js"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body onloadd="process()"> <div class="co

index.php：-

<!DOCTYPE html>
<html>
<head>
<script src="food.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 </head>    
 <body onloadd="process()">
 <div class="container">
 <h2 class="page-header">The Chuff Bucket</h2>

 <strong>Enter the food you want to order:</strong><br><br>

    <input type="text" class="form-control" id="userInput">

<div id="underInput">

</div>
</div>
</body>
</html>


粗水桶
输入您要点的食物：
foodstore.php

    <?php
    header('Content-Type:text/xml');
    echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';

    echo '<response>';

    $food = $_GET['food'];
    $foodArray = array('tuna','bacon','loaf','sandwich','pizza');
    if(in_array($food, $foodArray))
    {
        echo 'We do have'.$food.'!';
    }
    elseif($food=='')
    {
        echo 'Enter a food chomu';
    }
    else
    {
        echo 'We have no'.$food;
    }

  echo '</response>';
  ?>
食品.js“-

var xmlHttp=createXmlHttpRequestObject（）；
函数createXmlHttpRequestObject（）
{
var-xmlHttp；
if（window.ActiveXObject）
{
试一试{
xmlHttp=新的ActiveXObject（“Microsoft.xmlHttp”）；
}
捕获（e）
{
xmlHttp=false；
}
}
其他的
{
试一试{
xmlHttp=新的XMLHttpRequest（）；
}
捕获（e）
{
xmlHttp=false；
}
}
如果（！xmlHttp）
{
警报（“无法创建对象！！”；
}
其他的
{
返回xmlHttp；
}
}
函数过程（）{
if（xmlHttp.readyState==0 | | xmlHttp.readyState==4）
{
var food=encodeURIComponent（document.getElementById（“userInput”）.value）；
open（“GET”，“foodstore.php？food=“+food，true”）；
xmlHttp.onreadystatechange=handleServerResponse（）；
xmlHttp.send（空）；
}
其他的
{
setTimeout（'process（）'，1000）；
}
}
函数handleServerResponse（）{
if（xmlHttp.readyState==4）
{
if（xmlHttp.Status==200）
{
xmlResponse=xmlHttp.responseXML；
xmlDocElm=xmlResponse.documentElement；
msg=xmlDocElm.firstChild.data；
document.getElementById（“underInput”）.innerHtml=''+msg+''；
setTimeout（'process（）'，1000）；
}
其他的
{
警惕（“有什么不对劲！！”）；
}
}
}
我刚开始使用AJAX，这是我的第一段代码。我甚至免费托管了它。以下是url：-
我不知道代码有什么问题。我已经做了与教程中所示相同的操作。

这并不是你所想的那样：

xmlHttp.onreadystatechange = handleServerResponse();
这是立即调用
handleServerResponse
函数（该函数不做任何事情，因为当时
xmlHttp.readyState
不是
4
），并将该函数的结果设置为
onreadystatechange
回调。由于该函数不返回任何内容，因此该结果为
undefined

不要调用该函数，只需将其像变量一样设置为回调：

mlHttp.onreadystatechange = handleServerResponse;
这不是你想的那样：

xmlHttp.onreadystatechange = handleServerResponse();
这是立即调用
handleServerResponse
函数（该函数不做任何事情，因为当时
xmlHttp.readyState
不是
4
），并将该函数的结果设置为
onreadystatechange
回调。由于该函数不返回任何内容，因此该结果为
undefined

不要调用该函数，只需将其像变量一样设置为回调：

mlHttp.onreadystatechange = handleServerResponse;
javascript框架提供了一种简化的方法来使用Ajax请求。 使用这种框架是简化代码和避免重复的好方法

jQuery版本：

<script>
$(document).on('keyup', '#userInput', function(){
    var food = $(this).val(); // # <= means ID
    $.get('foodstore.php', 'food='+food, function(response){
        $('#underInput').html(response);
    });
});
</script>


$（文档）.on（'keyup'，'#userInput'，function（）{

var food=$（this.val（）；/#有一个javascript框架提供了一种简化的方法来使用Ajax请求，比如。
使用这种框架是简化代码和避免重复的好方法

jQuery版本：


<script>
$(document).on('keyup', '#userInput', function(){
    var food = $(this).val(); // # <= means ID
    $.get('foodstore.php', 'food='+food, function(response){
        $('#underInput').html(response);
    });
});
</script>




$（文档）.on（'keyup'，'#userInput'，function（）{

var food=$（this.val（）/#我建议使用。jQuery是一个javascript框架。它允许很多事情，包括简化的AJAX请求。好的，我会试试看，但是这种类型的AJAX有什么问题吗？基本上，没有什么问题。10年前AJAX就是这样使用的。现在，它已经被jQuery和Mootools等库简化了，因此简化了您的生活和使用简单方法=）我刚刚添加了一个示例，说明您正在尝试使用jQuery版本执行的操作。请不要忘记使用DL jQuery并将其添加到您的页面中，因为它有一个javascript ressource=）@ThinkTank感谢lotI推荐使用。jQuery是一个javascript框架。它允许很多事情，包括简化的AJAX请求。好的，我会试试看，但是这种类型的AJAX有什么问题吗？基本上，没有什么问题。10年前AJAX就是这样使用的。现在，jQuery和Mootools等库已经简化了它，所以简化吧我们的生活和使用简易方式=）我刚刚添加了一个示例，说明您正在尝试做什么，但使用jQuery版本。请不要忘记使用DL jQuery并将其添加到您的页面中，它有一个javascript ressource=）@ThinkTank谢谢一个洛蒂，我收到一个警告，我在javascript文件中写道“出了问题！"@AshirogiMuto：大概这意味着当代码执行时，
xmlHttp.Status
不是
200
。您可能需要检查服务器的响应，看看可能是什么问题。谢谢，我会查看服务器file@AshirogiMuto：那么听起来您需要进行一些调试。如果服务器不是
200
那么您必须首先检查该响应。我收到一个警告，我在javascript文件中写道“有问题！”@AshirogiMuto：大概这意味着当代码执行时，
xmlHttp.Status
不是
200
。您可能需要检查服务器的响应，看看可能是什么问题。谢谢，我会查看服务器file@AshirogiMuto：那么听起来您需要进行一些调试。如果服务器不是
200
那么你必须首先检查这个响应。我一定会尝试jquery Ajax为什么OP应该尝试这个？一个好的答案总是会解释做了什么以及为什么这样做，不仅是为了OP，而且是为了将来的访客。@JayBlanchard我提到他为什么应该你可以在问题的评论中直接回答这个问题。但是你是对的。比一次更好。@JayBlanchard谢谢你的教程链接。我改变了我的回答。呃：我已经