如何用AJAX实现网页无刷新功能

2016-02-19 18:25 5 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享如何用AJAX实现网页无刷新功能的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - Web开发 】

在本篇教程中,数据库的表名和日志查看页面以L-Blog为例,因为我的博客程序是从L-Blog修改而来。

本教程中的例子已经通过实际测试,可以直接在L-Blog或FBS中使用。当然,要真正应用的话还是需要做一些美化及完善的。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

在数据库中日志内容数据表名为blog_Content,其中日志ID为log_ID,日志标题为log_Title,日志查看页面为blogview.asp,参数为日志logID。有了这些资料,就可以开始创建搜索结果的XML文档模板了。在显示搜索结果时,需要显示日志的标题,以及日志的ID来创建到查看日志的链接。

搜索结果模板sample.xml

CODE:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

每个result就是一个搜索结果,为了处理没有找到相关内容的情况,我定义了当搜索结果为空时logid为#。
在完成XML文档模板之后,就可以用ASP来动态生成搜索结果需要的XML文档了。搜索的关键字采用POST方式来传递。

搜索结果输出ajaxsearch.asp

CODE:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

有了后台搜索结果输出的部分,就可以开始写前台搜索的部分了。
首先需要的是给用户输入搜索关键字及显示搜索结果的地方,我用div来分别显示这两个部分:

ajaxsearch.htm

来源:http://www.tulaoshi.com/n/20160219/1617599.html

延伸阅读
标签: Web开发
HTML HEAD titleAjax实现无刷新三联动下拉框/title meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" meta content="C#" name="CODE_LANGUAGE" meta content="JavaScript" name="vs_defaultClientScript" meta content="http://schemas.microsoft.com/intellis...
标签: Web开发
实现用的是jdbc+jsp+servlet,数据库用的是mysql 表就2个字段 实现原理获得text的值后,通过调用servlet查询数据库里是否存在,在通过xml传到前台 OperationName.java response.setContentType("text/xml;charset=UTF-8")这句很重要,没有他前台获得不到xml,之前做的时候没有加 所以前台获得不到xml package servlet; import java.io.IOExce...
标签: Web开发
做公司网站时的一个应用,用猫东的表单验证插件做实时的验证,和jquery的ajax提交数据,获取评论的时候加入简单的分页 原理很简单,注意一下编码问题就行了 实现了获取评论无刷新,发表评论无刷新,页面获取评论时显示loading加载效果 jquery真的是一个非常优秀的JS库,简单容易掌握,对于网页中的多级菜单、级联效果、Tab...
标签: Web开发
将index.html和upload.php文件保存到apache工作目录,例子使用安装目录D:/Program Files/Apache Software Foundation/Apache2.2/htdocs/ AJAX 客户端页面代码: index.html html  body  h1Ajax file upload sample/h1br/input id="uplaod" name="btn_send" type="button" value="上传测试"/  div id=result/div  PRE...
 前一段时间写了一篇文章,是关于用AJAX技术实现IE TREE无刷新的方法。 原文:http://bliss.cnblogs.com/archive/2006/03/15/350695.html 在原文中我说的是用javascript语法,当IE TREE被ONCLICK时,取得IE TREE的VALUE值。 因为当时我取的VALUE值中,包含IE TREE所点击的节点的INDEX值,所以,取得VALUE值后,用字...

经验教程

671

收藏

53
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部