使用AJAX将网页内容加载到DIV中

Question

我有一个文本框。当我在文本框中输入内容时，我想要将东西加载到下面的 DIV 中。这是我的代码等效：

<input type="text" onkeyup="/* I am not sure how it's done, but I'll just write: */ document.getElementById('search_results').innerHTML = getContents('search.php?query='+this.value);" /><br/>
<div id="search_results"></div>

希望你能帮忙，提前感谢！编辑：如果解决方案不涉及使用jQuery的话，我会很感激 - 只要可能的话。答案：我的做法是：

<input type="text" onkeyup="loadSearchResults(this.value)" /><br/>
<div id="search_results"></div>

<script>
function loadSearchResults(query){

if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    var xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
    var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("search_results").innerHTML=xmlhttp.responseText;
    }else if(xmlhttp.readyState>=1 && xmlhttp.status==200){
        // show the ajax loader or stuff like that...
    }
}
xmlhttp.open("GET","search.php?search="+query,true);
xmlhttp.send();

}
</script>

- arik

Answer 1

对于 AJAX 项目，可以从像 jQuery 这样的库开始。它会为您处理大量工作。

使用 jQuery，步骤可能如下：

1. Use the ajax command to retrieve the data from your server.

   $.ajax({
     url: 'search.php',
     data: "query=search_terms",
     success: finished(data));

2. update the div on result using a function like:

   
   function finished(result) {
       $('#search_results').innerHTML(result);
   }

- acrosman

---

好的。现在，如果我要安装jQuery，我该怎么做呢？ - arik

我添加了一些细节来扩展答案，具体细节因设置而异，但这应该可以让您朝着生产方向前进。 - acrosman

这看起来很不错！谢谢！我会试一下。但是，我非常想知道如何在JavaScript中使用这个jQuery ajax命令。这似乎与XMLHTTPRequest或类似的东西有关，我对AJAX非常没有经验，但我真的需要知道。提前感谢！ - arik

jQuery处理与XMLHTTPRequests相关的跨浏览器问题。找到一个直接描述如何进行请求的教程（例如http://w3schools.com/ajax/ajax_intro.asp）可能值得一试，但在实际生产中，我建议使用流行的库。 - acrosman

与此同时，我已经访问了W3Schools，并且我成功了！ - arik

Answer 2

你可以这样做：

$("#inputid").keyup(function(evt) {
    $("#search_results").load("/getresults.php", {queryparam: evt.target.value});
});

当然，实际情况比这更复杂。您可能不想在每次按键时向服务器发送请求。如果服务器响应时间很长怎么办？您是否应该提供一些指示表明正在向服务器发出请求？

如果您使用jQueryUI，可以使用自动完成小部件，这可能会让您更接近所需的最终结果。

- lambacck