html+ajax无刷新搜索

分享一个无刷新的html+ajax例子,代码共为3个页面，分别为search.html是搜索的html页面，样式自己定义，ajax.js全部js代码，ss.asp处理搜索的内容。代码不多很容易理解，学习吧都在代码中加了说明，如果你看不懂，就加我QQ463004799吧。下面说代码了哦。

1，search.html的代码，你复制全部哦

2，ajax.js，跟上面那个文件在同目录

function createAjax() {

var _xmlhttp;

try {

_xmlhttp=new ActiveXObject(\"Microsoft.XMLHTTP\");

}

catch (e) {

try {

_xmlhttp=new XMLHttpRequest();

}

catch (e) {

_xmlhttp=false;

}

}

return _xmlhttp;

}

function ajax(page) {

//上面是JS代码，page是页数，

var gjz = window.document.ss.gjz.value;

var cl = window.document.ss.cl.value;

//上面是变量=表单传来的信息，ss是表单的名称,gjz等是文本框或者菜单的名称

var xmlhttp=createAjax();

if (xmlhttp) {

var content=document.getElementById('jieguo');

//定义显示内容到ID为jieguo的DIV里

xmlhttp.open('get','ss.asp?gjz='+gjz+'&cl='+cl+'&page='+page+'&n='+Math.random(),true);

//以GET的方式提交内容到ss.asp，并且带上参数，gjz和cl和页数，页数就是你打开的第几页，最后加上math.random是为了防止缓存信息不更新的。

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4 && xmlhttp.status==200) {

content.innerHTML=unescape(xmlhttp.responseText);

//把从ss.asp里穿过来的内容显示出来

}

else {

content.innerHTML='正在加载搜索结果,请稍等......';

}

}

xmlhttp.send(null);

}

}

function ajaxs(){

//定义这个复选框的JS，

var f5=document.getElementById(\"f5\")

//让f5=复选框

if(f5.checked){

//如果复选框打上对勾就进行ajax代码里的页数1，这就对应了哪个gjz的文本框输入内容就显示了

ajax(1);

}

}

3，ss.asp，也是同目录

<%

'这里是数据库连接

'数据库里有表为b1,b2,b3,b4,每个表里有字段，id自动编号，bt这是标题可以是备注，sj为时间，

Dim page,cl,gjz,'定义变量

gjz=trim(request.QueryString(\"gjz\"))'参数传值

gjz=replace(\"\"&gjz&\"\替换关键字中的空格

cl=request.QueryString(\"cl\")

page = unescape(Request.QueryString(\"page\"))

If page<>\"\" Then'如果 页码=空

if gjz=\"\" or len(gjz) >20 then '关键字为空或者大于20

response.Write(escape(\"关键字不能为空\"))

response.End()

end if

Set rs = Server.CreateObject(\"ADODB.Recordset\")'链接表

'下面是查询字段

rs.open\"SELECT * FROM \"&cl&\" where bt like '%\"&gjz&\"%' ORDER BY id desc\这里是选择穿过来的biao,中的bt包含关键字

If rs.EOF Then'如果为空

Response.Write(escape(\"抱歉！表里暂时没有关键字为\"&gjz&\"的内容！\"))

Else'否则

rs.pagesize =5'每页为5条

page = CLng(page)

If page<1 Then

page = 1

ElseIf page>rs.pagecount Then

page = rs.pagecount

End If

rs.absolutepage = page

Dim i, Str,redbt,redid

For i = 1 To rs.pagesize'循环5条记录

redid=replace(rs(\"id\"),\"\"&gjz&\"\class=\"\"red\"\">\"&gjz&\"\")'定义红色高亮显示

redbt=replace(rs(\"bt\"),\"\"&gjz&\"\

Str = Str &\"\"'这里是定义输出什么内容

Str = Str &\"

Str = Str &\"\"

rs.movenext

If rs.EOF Then Exit For'如果为空则退出循环

Next

Str = Str & \"<< \"'首页

For i = 1 To rs.pagecount

If i = page Then

Str = Str & \"\" & i & \" \"

Else

Str = Str & \"\" & i & \" \"

End If

Next

Str = Str & \" >>\" '尾页

Str = Str & \"  共\"&rs.pagecount&\"页  共\"&rs.recordcount&\"条 每页\"&rs.pagesize&\"条\"

Str = escape(Str)

Response.Write(Str)'输出以上结果，切记必须以escape(\"\")这样输出，也就是说必须用response(escape(\"输出内容\"))

End If

rs.Close

Set rs = Nothing

conn.Close

Set conn = Nothing

response.End()

Else

End If

%>

总代码结束。效果如,当然样式自己定义：http://www.xuexb.com/search.html

下面总结下。

数据库连接你自己写吧，不要说不会哦。数据库里有4个表，分别为b1,b2,b3,b4，每个表里有字段id自动编号，bt备注，sj时间等，等你熟悉了 这些东西都可以自己改的。

在ss.asp里输出的时候必须用response(escape(\"输出内容\"))这个格式才会显示到

search.html里哦。

版权终归原创作者（学习吧）所有，转载请保留原创作者信息