10Ajax数据库.ppt

1、ASP动态网页设计与Ajax技术,唐四薪 主编 ISBN：9787302269731 清华大学出版社 ,第十章 以Ajax方式访问数据库,以Ajax方式访问数据库,Web应用程序配合Ajax技术则能设计出更加友好的交互效果。通过Ajax方式访问数据库可以 在静态页面上载入数据库中的数据 在无刷新的情况下查询数据库并更新显示查询结果 无刷新的情况下对数据库中数据进行添加、删除和修改 无刷新情况下对记录集进行分页,10.1 以Ajax方式显示数据,原理：在静态页中通过Ajax程序加载能显示数据的动态页 以原有格式显示数据 所加载的动态页含有HTML代码 以自定义的格式显示数据 加载的动态页是JSO

2、N格式的字符串 加载的动态页是用某个特殊字符分隔的字符串,获取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

5、.html在页面加载时不能够显示登录表单，而是根据用户是否具有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(); $

7、(#content).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 制作无刷新购物车程序,1

8、0.4 以Ajax方式修改记录,修改记录的过程实际上可分为两步： 根据ID查找记录并将要修改的记录显示在表单中 用户在表单中修改信息并单击“修改”按钮后，就会调用函数modify1(id)，并将这条记录的id传递给该函数，该函数首先获取用户在表单中输入的内容，将这些内容连同记录的id一起发送给服务器端页面，服务器端页面根据id找到记录进行修改，修改完成后发送数据1给客户端表示修改成功，客户端收到1后，就在页面上单独更新记录所在行的数据。,10.4.2 制作无刷新投票系统,10.5 以Ajax方式删除记录,当用户单击“删除”链接时，将调用函数del1(id)，并将记录的id值传递给该函数，函数d

9、el1(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

10、(i in 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.asp function(data) $(#list).html(data); ,10.6.2 可设置每页显示记录数的分页程序,10.6.3 同时具有删除记录功能的分页程序,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. 在Aja