百度词条的填充

最新推荐文章于 2025-08-12 14:56:01 发布

zhangjinlei00

最新推荐文章于 2025-08-12 14:56:01 发布

阅读量378

点赞数

CC 4.0 BY-SA版权

文章标签：百度 javascript function xmlhttprequest search json

本文链接：https://blog.youkuaiyun.com/zhangjinlei00/article/details/8074861

源代码

baidu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度</title>
<script language="javascript" type="text/javascript" src="baidu.js">

</script>
<script language="javascript" type="text/javascript" src="ajax.js">

</script>
<script language="javascript" type="text/javascript">
function initBaidu(){
   document.getElementById("div").style.border="none";

   }
function testAjax(str){
   //var str = document.getElementById('search_text').value;
   testXHR('baidu.php',"c="+encodeURI(str),m_xhr);

   }
function m_xhr(xhr){
       var str = "";
       var json = eval("("+xhr.responseText+")");
       for(var i=0;i<json.length;i++)
       str += '<span style=" position:absolute; left:0;" onclick="chooseIt(this)" onmouseover="onIt(this)" onmouseout="outIt(this)">'+json[i].text+'</span><br />';
       document.getElementById("div").innerHTML = str;//this对象是form表单的对象，只能为form表单这样设置对象
       }
</script>

</head>

<body onload="initBaidu()">
<center>
<h1>百度一下，你就知道</h1>
<table>
<tr><td>
<form action="" method="post">
<input type="text" size="30" id="search_text" name="search_text" onkeyup="testAjax(this.value)" />
<input type="submit" value="点击搜索" /></form>
</td></tr>
<tr><td>
<div style=" position:relative; background:#C0F; border:dashed #999 1px;" id="div">
</div>
</td></tr>
</table>
</center>
</body>
</html>

baidu.php

<?php
$jsonStr = "";
$link = mysql_connect('localhost','root','123');
mysql_select_db('baidu',$link);
mysql_query('set names utf8');
if($_GET["c"]!=''){
$result = mysql_query("select content from c where content like '".$_GET["c"]."%'");

while($row = mysql_fetch_row($result)){
   $jsonStr .= '{text:"'.$row[0].'"},';//构造json为数组字面量，其中每个元素为一个json格式的对象字面量
}
   $jsonStr = rtrim($jsonStr,',');//去除最右面的逗号
   $jsonStr = "[".$jsonStr."]";
   echo $jsonStr;//以数组字面的形式将responsetText返回

   }

//需要将回传的数据用json()表示（为了一行一行的遍历回传数据）
//对象自变量var obj = {属性名：属性值，，，，};
//数组自变量 var arr = [值1，值2……];//值可以为任意类型的数据

baidu,js

// JavaScript Document

function chooseIt(obj){
   //obj是用this传递过来的当前点击对象
   document.getElementById("search_text").value =

obj.innerHTML;//将选择的内容在文本框中进行填充
   document.getElementById("div").innerHTML="";//清空搜索简易的

内容
   document.getElementById("div").style.border="none";//让搜索建

议图层的边框消失

   }
function onIt(obj)
    {
   obj.style.backgroundColor = "#36F";
   }
function outIt(obj){
   obj.style.backgroundColor = "#C0F";

   }

ajax.js