《【2017年整理】10Ajax数据库》由会员分享，可在线阅读，更多相关《【2017年整理】10Ajax数据库（32页珍藏版）》请在金锄头文库上搜索。
1、ASP动态网页设计与Ajax技术,唐四薪 主编 ISBN：9787302269731清华大学出版社 http:/,第十章 以Ajax方式访问数据库,以Ajax方式访问数据库,Web应用程序配合Ajax技术则能设计出更加友好的交互效果。通过Ajax方式访问数据库可以在静态页面上载入数据库中的数据在无刷新的情况下查询数据库并更新显示查询结果 无刷新的情况下对数据库中数据进行添加、删除和修改无刷新情况下对记录集进行分页,10.1 以Ajax方式显示数据,原理：在静态页中通过Ajax程序加载能显示数据的动态页以原有格式显示数据 所加载的动态页含有HTML代码以自定义的格式显示数据加载的动态页是JSON
2、格式的字符串 加载的动态页是用某个特殊字符分隔的字符串,获取JSON字符串,$.getJSON(10-2.asp, function(data) $.each(data, function(i, item) var tr = + item.title + + item.content + + item.author + + item.email + + item.ip + ;$(#disp).append(tr);););,data是一个json数组，item是data中的某一项，是一个json对象,获取用某个特殊字符分隔的字符串,$.get(10-3.asp, function(data)
3、str=data.split(|);var tr = + str0+ + str1+ + str2 + + str3 + + str4 + ;$(#disp).append(tr););,将字符串切分后装入各个HTML元素中,10.2 以Ajax方式查找数据,查找数据先要发送一个查询关键字（关键字通常是用户在表单中输入的）给服务器端程序，服务器根据该关键字查询特定的数据表再将查询结果发送给客户端。在Ajax中，可以参照9.3节中的方法发送查询数据给服务器，然后再用回调函数接收从服务器返回的查询结果。,10.2.2 查找数据的应用举例,1. 制作级联下拉框,2. 异步方式检测用户名是否可用,$(
4、#user).blur(function()user=$(#user).val(); $.get(10-9.asp, username:user,n:Math.random(), function (data) ,3. 制作带自动提示功能的输入框,当用户在文本框中键入字符后（根据文本框中的值是否改变），就调用findroutes()函数获取用户输入的内容，然后将其异步提交到服务器查询以它开头的内容,4. 制作Ajax无刷新登录系统,单击登录按钮后，就先判断是否输入了用户名和密码，如果输入了，就将用户名和密码发送给10-11.asp进行查询,4. 制作Ajax无刷新登录系统(2),10-12.h
5、tml在页面加载时不能够显示登录表单，而是根据用户是否具有Session或是否输入了正确的密码来判断是载入登录成功的界面（loginok()）还是载入未登录时的表单界面（loginno()）,5. 制作异步加载新闻的新闻网站首页,6. 制作股票查询系统,通过异步请求的方式向某些网站发出请求，则它会返回相应的实时股票数据,7. 制作动态载入内容的弹出框,当鼠标经过某条记录时，才异步载入这条记录带有的图片，这样在打开网页时，并没有加载任何图片，而是根据用户的操作再加载对应的图片,在电子商务网站中广泛应用,10.3以Ajax方式添加记录,将用户在表单中输入的数据作为$.post()方法的data参数
6、发送给服务器。服务器端获取到数据后，先将这些数据作为一条记录插入到表中，然后再重新读取更新后的表中的所有数据并输出给客户端。 客户端页面将服务器返回的数据载入到一个容器元素中，就可以显示添加记录后的数据表了,添加记录的实现,$.post(10-16.asp,title:escape(title), author:escape(author), email:escape(email), content:escape(content), act:add , function(data) $(#title).val();$(#author).val(); $(#email).val(); $(#co
7、ntent).val(); $(#make).html(data); );,10.3.2 在服务器端和客户端分别添加记录,10-16.asp Response.write 1 10-15.asp function(data) if(data=1)$(#title).val();$(#author).val(); $(#email).val(); $(#content).val(); var newtr=+title+content+author+ +email+;$(#make).prepend(newtr); ,10.3.3 制作无刷新评论系统,10.3.4 制作无刷新购物车程序,10.4
8、以Ajax方式修改记录,修改记录的过程实际上可分为两步： 根据ID查找记录并将要修改的记录显示在表单中 用户在表单中修改信息并单击“修改”按钮后，就会调用函数modify1(id)，并将这条记录的id传递给该函数，该函数首先获取用户在表单中输入的内容，将这些内容连同记录的id一起发送给服务器端页面，服务器端页面根据id找到记录进行修改，修改完成后发送数据1给客户端表示修改成功，客户端收到1后，就在页面上单独更新记录所在行的数据。,10.4.2 制作无刷新投票系统,10.5 以Ajax方式删除记录,当用户单击“删除”链接时，将调用函数del1(id)，并将记录的id值传递给该函数，函数del1(
9、id)将id用$.get方法发送给服务器端，服务器根据该id删除对应的记录后 function(data) if(data=1) kk=fff+id; s=document.getElementById(kk); $(s).remove(); ,10.5.2 同时删除多条记录的程序,$(:checkbox:checked).each(function()delseldelsel.length=this.value;);idstr=delsel.join();$.get(10-19.asp,id:idstr,act:del,function(data) if(data=1) for (i in
10、delsel) kk=fff+delseli; s=document.getElementById(kk); $(s).remove(); );,10.6 以Ajax方式进行记录集分页,每个分页链接不再指向一个URL地址，而是链接到一个分页的函数，该函数中有一个参数用来传递页码给服务器 function getweblist(str) $.get(10-21.asp,act:list,pageNo:str,/发送页码给10-21.aspfunction(data) $(#list).html(data);,10.6.2 可设置每页显示记录数的分页程序,10.6.3 同时具有删除记录功能的分页程
11、序,function del1(id,str)$.get(“10-25.asp”, id:id,act:“del”,pageNo:str,function(data) $(“#list”).html(data); );,原始的Ajax程序与jQuery Ajax程序的比较,XMLHttpRequest对象的方法,10.7.2 调试Ajax程序的方法,首先执行后台页面，看后台页面运行是否正常 如果该动态页面不需要获取参数就可以运行，那么直接运行该文件即可；如果动态页面需要先获取参数才能运行，那么可以自己在地址栏中输入参数 前台页面的调试,习题,1. 在Ajax程序中，显示记录的程序和查询记录的程序有何区别？2. 在Ajax程序中，如果要以自定义的格式显示从服务器传来的数据，通常有哪两种方法。3. 用Ajax程序向数据表添加记录时，如何在客户端和服务器端分别添加记录,附录A：ASP与ASP.Net的区别,运行环境不同ADO与ADO.NET的区别 数据集和记录集的区别 ASP中的对象的关闭方式,
