代码之家 › 专栏 › 技术社区 › arik

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

ajax jquery javascript

arik · 技术社区 · 14 年前

我有一个文本字段。当我在非文本字段中键入内容时,我希望将内容加载到下面的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>

2 回复 | 直到 14 年前

acrosman 14 年前

对于Ajax项目,从类似于 jQuery . 它将为您处理大量的工作。

使用jquery,步骤如下:

使用 ajax command 从服务器检索数据。

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

使用如下函数更新DIV ON结果:


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

lambacck 14 年前

您可以执行以下操作:

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

当然,它最终会比这更复杂。您可能不想在每次按键时向服务器发送请求。如果服务器需要很长时间来响应,会发生什么情况?您是否应该提供一些向服务器发出请求的指示?

如果使用jqueryui,则可以使用 autocomplete widget 这可能会让你更接近你想要的最终结果。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前