我的AJAX脚本未提供任何输出

Question

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>';
  ?>

food.js”-

   var xmlHttp = createXmlHttpRequestObject();

  function createXmlHttpRequestObject()
  {
    var xmlHttp;

    if(window.ActiveXObject)
    {
        try{

            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e)
        {
            xmlHttp = false;
        }
    }
    else
    {
        try{

            xmlHttp = new XMLHttpRequest();

        }
        catch(e)
        {
            xmlHttp = false;
        }
    }
    if(!xmlHttp)
    {
        alert("Cannot create the object!!");
    }
    else
    {
        return xmlHttp;
    }
    }

    function process() {

    if(xmlHttp.readyState == 0 || xmlHttp.readyState == 4)
    {
    var food =   encodeURIComponent(document.getElementById("userInput").value);
    xmlHttp.open("GET","foodstore.php?food="+food,true);
    xmlHttp.onreadystatechange = handleServerResponse();
    xmlHttp.send(null);
    }
    else
    {
      setTimeout('process()',1000);
    }
    }

    function handleServerResponse() {
      if(xmlHttp.readyState == 4)
      {
        if (xmlHttp.Status == 200)
        {
            xmlResponse = xmlHttp.responseXML;
            xmlDocElm = xmlResponse.documentElement;
            msg = xmlDocElm.firstChild.data;
            document.getElementById("underInput").innerHtml = '<span style="color:blue;">'+msg+'</span>';
            setTimeout('process()',1000);

        }
        else
        {
            alert("Something is wrong!!");
        }
        }
        }

我刚开始使用AJAX，这是我的第一个代码。 我什至免费托管了它。 网址是： -Chuff Bucket，我不知道代码有什么问题。 我已经完成了本教程中所示的操作。

Answer 1

这没有按照您的想法做：

xmlHttp.onreadystatechange = handleServerResponse();

这将立即调用handleServerResponse函数（该操作不执行任何操作，因为xmlHttp.readyState当时不是4 ），并将该函数的结果设置为onreadystatechange回调。 由于该函数不返回任何内容，因此结果是undefined 。

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

mlHttp.onreadystatechange = handleServerResponse;

Answer 2

有一个javascript框架提供了一种简化的方式来使用Ajax请求，例如jQuery Ajax 。 使用这种框架是简化代码并且不重复DRY的好方法。

jQuery版本：

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

我的AJAX脚本未提供任何输出

问题描述

2 个解决方案

解决方案1
3 2016-03-07 15:19:53

解决方案2
-1 2016-03-07 15:22:45

我的AJAX脚本未提供任何输出

问题描述

2 个解决方案

解决方案1 3 2016-03-07 15:19:53

解决方案2 -1 2016-03-07 15:22:45

解决方案1
3 2016-03-07 15:19:53

解决方案2
-1 2016-03-07 15:22:45