ajax实现网站搜索框功能

发布时间：2020-12-16 03:26:45 所属栏目：百科来源：网络整理

导读：1 !DOCTYPE html html head meta charset = "utf-8" script function showHint (str) { var xmlhttp; if (str.length== 0 ) { document.getElementById( "txtHint" ).innerHTML= "" ; return ; } if (window.XMLHttpRequest) { // IE7+,Firefox,Chrome,Opera

1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script> function showHint(str) { var xmlhttp; if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { // IE7+,Firefox,Chrome,Opera,Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6,IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","http://www.runoob.com//try/ajax/gethint.php?q="+str,true); xmlhttp.send(); } </script>
</head>
<body>

<h3>在输入框中尝试输入字母 a:</h3>
<form action=""> 
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p> 

</body>
</html>

源代码解析：

如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数。

如果输入框不为空，showHint() 函数执行以下任务：

创建 XMLHttpRequest 对象
当服务器响应就绪时执行函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q （带有输入框的内容）

2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script> function showCustomer(str) { var xmlhttp; if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { // IE7+,"/try/ajax/getcustomer.php?q="+str,true); xmlhttp.send(); } </script>
</head>
<body>

<form action=""> 
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana,Arial,Helvetica,sans-serif;">
<option value="APPLE">Apple Computer,Inc.</option>
<option value="BAIDU ">BAIDU,Inc</option>
<option value="Canon">Canon USA,Inc.</option>
<option value="Google">Google,Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</form>
<br>
<div id="txtHint">客户信息将显示在这...</div>

</body>
</html>

showCustomer() 函数执行以下任务：

检查是否已选择某个客户创建 XMLHttpRequest 对象当服务器响应就绪时执行所创建的函数把请求发送到服务器上的文件请注意我们向 URL 添加了一个参数 q （带有输入域中的内容）

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!