AJAX 在调试模式下工作，但不是实时的

AJAX works when in debug mode but not in real time

本文关键字：实时 工作 调试 模式 AJAX      更新时间：2023-09-26
当我

在调试模式下缓慢步进时，我的代码可以工作，但是当我实时尝试时，它似乎不想更新页面。这是javascript：

searchButton = document.getElementById("searchButton");
var searchBox = document.getElementById('searchBox');
searchButton.addEventListener("click", searchItem);
function searchItem(){
  searchString = searchBox.value;
  article = document.getElementById("homeSection");
  var xmlhttp = getXmlHttpRequestObject();
  var string = '';
  if(xmlhttp){
    xmlhttp.onreadystatechange = function(){
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        var response = JSON.parse(xmlhttp.responseText);
        for(var i=0; i<response.length; i++){
          string += '<section class="searchResult">';
          string += '<h1>' + response[i].Name + '</h1>';
          string += '<p class="photo"></p>';
          string += '<p class="price">£' + response[i].Price + '</p>';
          string += '<p class="productID">ID: ' + response[i].ID + '</p>';
          string += '<p class="description">' + response[i].Description + '</p>';
          string += '<p class="quantity">Quantity: ' + response[i].Quantity + '</p>';
          string += '</section>';
        }
        article.innerHTML = '<h1>Search</h1><section><h1 class="bottomBorder">You searched for: "' + searchString + '"</h1></section>';
        article.innerHTML += string;
      }
    };
    xmlhttp.open("GET", "search.php?search=" + searchString, true);
    xmlhttp.send(null);
  }
}
你需要

做的两件事

  1. 取消触发函数的点击操作
  2. 对发送到服务器的内容进行第二次编码

更新的代码：

function searchItem (event){
    event.preventDefault();
    var searchStringEnc = encodeURIComponent(searchBox.value);
    ...
    xmlhttp.open("GET", "search.php?search=" + searchStringEnc, true);

它不适用于IE，此处的其余响应和建议是正确的。为什么只使用 IE？因为您有未定义的变量：

searchString = searchBox.value;

正确

var searchString = searchBox.value;

要检查您的脚本是否真正有效，只需提醒格式化的字符串即可。

article.innerHTML += string;
alert(string);

然后你就会知道出了什么问题。

如果您使用表单中的按钮通过 AJAX 发布，请确保按钮类型="按钮"，否则它将充当提交按钮并提交表单。这个小功能让我感到沮丧!!

相关文章：