扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍“AJAX怎么实现无刷新搜索功能”,在日常操作中,相信很多人在AJAX怎么实现无刷新搜索功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”AJAX怎么实现无刷新搜索功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联自2013年创立以来,先为拜城等服务建站,拜城等地企业,进行企业商务咨询服务。为拜城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
在数据库中日志内容数据表名为blog_Content,其中日志ID为log_ID,日志标题为log_Title,日志查看页面为blogview.asp,参数为日志logID。有了这些资料,就可以开始创建搜索结果的XML文档模板了。在显示搜索结果时,需要显示日志的标题,以及日志的ID来创建到查看日志的链接。
搜索结果模板sample.xml
代码如下:
每个result就是一个搜索结果,为了处理没有找到相关内容的情况,我定义了当搜索结果为空时logid为#。
在完成XML文档模板之后,就可以用ASP来动态生成搜索结果需要的XML文档了。搜索的关键字采用POST方式来传递。
搜索结果输出ajaxsearch.asp
代码如下:
<%
' commond.asp为数据库连接文件
' function.asp中有要用到的函数CheckStr
Dim Search_Word,XML_Result,rsSearch,sqlSearch
Set rsSearch=Server.CreateObject("ADODB.RecordSet")
' 获取搜索关键字
Search_Word=CheckStr(Trim(Request.Form("searchword")))
' XML文档头
XML_Result="
IF Search_Word<>Empty Then
' 创建查询SQL语句
sqlSearch="SELECT log_ID,log_Title,log_Content FROM blog_Content WHERE log_Title"_
&" LIKE '%"&Search_Word&"%' AND log_IsShow=True ORDER BY log_ID DESC"
' 打开记录集
rsSearch.open sqlSearch,Conn,1,1
' 如果没有搜索结果就产生一个结果,logid为#,标志着没有搜索结果
IF rsSearch.BOF AND rsSearch.EOF Then
XML_Result=XML_Result&"
End IF
' 循环输出搜索结果
Do While Not rsSearch.EOF
XML_Result=XML_Result&"
rsSearch.MoveNext
Loop
Else
' 关键字为空,则返回无搜索结果
XML_Result=XML_Result&"
End IF
XML_Result=XML_Result&"
' 设置MIME Type为XML文档
Response.ContentType = "application/xml"
'Response.CharSet = "utf-8"
' 输出搜索结果
Response.Write(XML_Result)
%>
有了后台搜索结果输出的部分,就可以开始写前台搜索的部分了。
首先需要的是给用户输入搜索关键字及显示搜索结果的地方,我用div来分别显示这两个部分:
ajaxsearch.htm
代码如下:
完成了用户输入及结果输出的部分,就可以开始写最后的部分——客户端程序了。
首先是创建XMLHttpRequest对象,这部分代码不再多说,对AJAX稍有接触应该都看得懂这段代码,前篇教程中也有详细注释:
代码如下:
var xmlObj = false;
var xmlResult;
try {
xmlObj=new XMLHttpRequest;
}
catch(e) {
try {
xmlObj=new ActiveXObject("MSXML2.XMLHTTP");
}
catch(e2) {
try {
xmlObj=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e3) {
xmlObj=false;
}
}
}
if (!xmlObj) {
alert("XMLHttpRequest init Failed!");
}
function AjaxSearch() {
var searchword;
searchword=escape(document.getElementById("searchword").value);
if(searchword=="") {
document.getElementById("search_result").innerHTML="
function AjaxShowResult() {
var results,i,strTemp;
results=xmlResult.getElementsByTagName("result");
strTemp="
至此,一个完整的AJAX实例完成了。
到此,关于“AJAX怎么实现无刷新搜索功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流