使用AJAX来加载网页内容到DIV [英] Use AJAX to load webpage content into DIV

问题描述

我有一个文本字段。当我输入的东西到不是文本字段，我想要加载的东西到下面的DIV。这是我的code等效的：

 ＆LT;输入类型=文本的onkeyup =/ *我不知道它是如何做的，但我会这样写：* /的document.getElementById（'search_results） .innerHTML = getContents（'？search.php中查询='+ THIS.VALUE）; /＆GT;＆LT; BR /＆GT;
＆LT; D​​IV ID =search_results＆GT;＆LT; / DIV＆GT;
 

希望能对你有所帮助。在此先感谢！

编辑：我想AP preciate，如果解决方案不涉及使用jQuery - 只要有可能

答：我怎么做：

 ＆LT;输入类型=文本的onkeyup =loadSearchResults（THIS.VALUE）/＆GT;＆LT; BR /＆GT;
＆LT; D​​IV ID =search_results＆GT;＆LT; / DIV＆GT;

＆LT;脚本＆GT;
功能loadSearchResults（查询）{

如果（window.XMLHtt prequest）{// $ C $下IE7 +，火狐，Chrome，歌剧，Safari浏览器
    VAR XMLHTTP =新XMLHtt prequest（）;
}其他{// code对IE6，IE5
    VAR XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;
}
xmlhttp.onreadystatechange =功能（）{
    如果（xmlhttp.readyState == 4和＆安培; xmlhttp.status == 200）{
        的document.getElementById（search_results）的innerHTML = xmlhttp.responseText。
    }否则如果（xmlhttp.readyState＆GT; = 1＆安培;＆安培; xmlhttp.status == 200）{
        //显示阿贾克斯装载机或类似的东西...
    }
}
xmlhttp.open（GET，search.php中搜索=？+查询，真正的）;
xmlhttp.send（）;

}
＆LT; / SCRIPT＆GT;
 

解决方案

有关AJAX项目开始与像 jQuery的库。它可以处理大量的工作给你。

使用jQuery的步骤是这样的：

1. 使用 AJAX命令检索您的服务器的数据。

     $。阿贾克斯（{
     网址：'search.php中，
     数据：查询= SEARCH_TERMS
     成功：完成（数据））;  

2. 更​​新使用功能，像结果DIV：

    
   功能完成的（结果）{
       $（'＃search_results）的innerHTML（结果）。
   } 

I have a text field. When I type something into than text field, I want to load stuff into the DIV below. That's my code equivalent:

<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>

Hope you can help. Thanks in advance!

EDIT: I would appreciate it if the solution did not involve using jQuery - as long as it's possible.

ANSWER: How I'm doing it:

<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>

解决方案

For AJAX projects start with a library like jQuery. It will handle a great deal of the work for you.

Using jQuery the steps would be something like:

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);
   }

这篇关于使用AJAX来加载网页内容到DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！