0

这是 html 程序...这里我使用 ajax 在文本字段上输入一些数据后显示输出，当 food='' 时它只给出第一个响应，之后它不会显示另一个像我们没有的响应。或者我们确实有。

<!DOCTYPE>
<html>
<head>
    <script type="text/javascript" src="foodstore.js"></script>
</head>
<body onload="process()">
    <h1>choose your favorite food</h1>
    <input type="text"  id="inputuser">
    <div id="usererror"></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('shahi paneer','matar paneer','matar alu','raita');
if(in_array($food,$foodArray))
  {
   echo 'we  do have '.$food.'!'; 
   }
elseif($food=='')
  { 
    echo 'please enter any dish';
      }
 else
 {
   echo 'we dont have '.$food.'!';
 }
 echo '</response>';

 ?>

这是 foodstore.js

var xmlHttp=createXmlHttpRequestObject();
function createXmlHttpRequestObject()
{
var xmlHttp;
  if (window.XMLHttpRequest)
   {
     xmlHttp=new XMLHttpRequest();
   }
  else
   {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

   if(!xmlHttp)
      alert("cant create that object");
   else
       return xmlHttp;
  }
  function process()
    {
    if (xmlHttp.readyState==0 ||xmlHttp.readystate==4)
     { 
      dish=encodeURIComponent(document.getElementById("inputuser").value);
      xmlHttp.open("GET","foodstore.php?food="+dish, true);
      xmlHttp.onreadystatechange=handleServerResponse;
      xmlHttp.send(null);
     }
    else{
        setTimeout('process()',1000);
        }
 }
    function handleServerResponse(){
       if(xmlHttp.readyState==4){
           if(xmlHttp.status==200){
          xmlResponse=xmlHttp.responseXML;
          xmlDocumentElement=xmlResponse.documentElement;
          message=xmlDocumentElement.firstChild.data;
           document.getElementById("usererror").innerHTML='<span style     ="color:red">'+message+'</span>';
   setTimeout('process()',1000);
    }
    else
   {
    alert('something went wrong');
      }
     }
    }
4

2 回答 2

0

更改您的onloadononBlur并从 onload 中删除并放入input：

<input type="text"  id="inputuser" onblur="process()">
于 2013-08-13T11:18:22.643 回答
0

方法应该是

  1. 为文本框编写 onchange 事件（文本框内容的 onchange 调用 process() 函数）。

                or

  2. 添加一个按钮来触发该功能。=> 用户输入菜肴并点击按钮。

方法一（使用jQuery）

<!DOCTYPE>
<html>
<head>

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<!--<script type="text/javascript" src="foodstore.js"></script>-->
<script>
    $(document).on("keyup","#inputuser", function(){

        var dish = $(this).val();

        $.ajax({
          type: "GET",
          url: 'foodstore.php',
          data : {food:dish},
          success: function(data){alert(data);
            $('#usererror').html(data);
          }
        });
    });
</script>
</head>
<body>
    <h1>choose your favorite food</h1>
    <input type="text"  id="inputuser" value="" />
    <div id="usererror"></div>
</body>
</html>

foodstore.php

<?php
$food=$_GET['food']; 
$foodArray=array('shahi paneer','matar paneer','matar alu','raita');
if(in_array($food,$foodArray)) {
   echo 'we  do have '.$food.'!'; 
}
elseif($food=='') { 
   echo 'please enter any dish';
} else  {
   echo 'we dont have '.$food.'!';
}

?>
于 2013-08-13T10:24:36.620 回答