Question

我是AJAX的新手并且正在学习它。我在我的HTML文本框中搜索食物项目并尝试与服务器通信以了解该项目是否可用。项目的相应状态应显示在文本框下方的div标签中，但不会显示。

我还没有学过jQuery，想知道以下事情：

如何使用AJAX和JavaScript以明文形式从服务器获取响应，并将其显示在文本框下方的div标签中（建议在代码中进行更改）。
我应该在JavaScript代码中做什么更改，以便在POST方法中发送AJAX请求（我知道PHP代码中的更改）？

// index.html的

<head>
  <script type="text/javascript" src="food.js">
  </script>
</head>

<body>
  <h3>The Cheff's Place</h3>
  Enter the food you want to order

  <input type="text" id="userInput" name="input" onkeypress="sendInfo()"></input>

  <div id="underInput"></div>

</body>

</html>

// food.js

var request;

function sendInfo() {
  var v = document.getElementById("userInput").value;
  var url = "index.php?food=" + v;

  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    request = new ActiveXObject("Microsoft.XMLHTTP");
  }

  if (request.readyState == 0 || request.readyState == 4) {
    try {
      request.onreadystatechange = getInfo;
      request.open("GET", url, true);
      request.send(null);
    } catch (e) {
      alert("Unable to connect to server");
    }
  }
}

function getInfo() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      var val = request.responseText;
      document.getElementById('underInput').innerHTML = val;
    }
  }
}

//的index.php

<?php
  header('Content-Type: text/plain');
  $food = $_GET['food'];
  $foodArray = array("paneer", "butter", "chicken", "tandoori", "dal");
  if (in_array($food, $foodArray))
  {
    echo "We do have " .$food;
  }

  elseif($food == "")
  {
    echo "Kindly enter some food";
  }

  else
  {
    echo "We do not sell " .$food;
  }
?>

Answer 1

我运行了你的代码。它工作正常。只需用onkeyup替换onkeypress。

<input type="text" id="userInput" name="input" onkeyup="sendInfo()"></input>

使用JQuery（假设你已经包含了jquery文件或cdn）：

在正文末尾的script标记中包含以下代码段。

    $("#userInput").keyup(function(){
        $.get("index.php", { food: $("#userInput").val() })
            .done(function(data) {
                $("#underInput").html(data)
            })
    });

AJAX逻辑不起作用

1 个答案: