Question

当我在调试模式中慢慢地进入时，我的代码正常工作，但是当我实时尝试时，它似乎并不想更新页面。这是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);
  }
}

Answer 1

你需要做的两件事

取消触发该功能的点击操作
第二次编码您要发送到服务器的内容

更新的代码：

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

Answer 2

它不适用于IE，其余的回复和建议都是正确的。为什么只有IE？因为你有未定义的变量：

searchString = searchBox.value;

正确

var searchString = searchBox.value;

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

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

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

Answer 3

如果您使用表单中的按钮发布AJAX，请确保按钮类型=“按钮”或它将作为提交按钮并提交表单。这个小小的功能让我感到非常沮丧！

AJAX在调试模式下工作但不能实时工作

3 个答案: