PHP-Web程序设计与Ajax技术之Ajax数据库

PHPWeb程序设计与Ajax技术唐四薪主编

清华大学出版社 ISBN：9787302344735 2014年1月第10章Ajax方式访问数据库以Ajax方式访问数据库Web应用程序配合Ajax技术那么能设计出更加友好的交互效果。通过Ajax方式访问数据库可以在静态页面上载入数据库中的数据在无刷新的情况下查询数据库并更新显示查询结果无刷新的情况下对数据库中数据进行添加、删除和修改无刷新情况下对结果集进行分页10.1以Ajax方式显示数据原理：在静态页中通过Ajax程序加载能显示数据的动态页以原有格式显示数据所加载的动态页含有HTML代码以自定义的格式显示数据加载的动态页是JSON格式的字符串加载的动态页是用某个特殊字符分隔的字符串10.1.1以原有格式显示数据10-1.php:显示数据表中数据的动态页面10-1.html:该页面有一个容器元素(#disp)，用来载入10-1.php生成的html代码10.1.2以自定义格式显示数据目的：使数据和数据的表现形式别离方法：①输出JSON格式字符串②输出用某个特殊字符分隔的字符串，在客户端用split方法切分获取的数据。获取JSON字符串$.getJSON("10-2.php",function(data){ $.each(data,function(i,item){

vartr="<tr><td>"+item.title+"</td><td>"+item.content+"</td><td>"+item.author+"</td><tdstyle='color:red'>"+item.email+"</td><td>"+item.ip+"</td></tr>";

$("#disp").append(tr); }); }); data是一个json数组，item是data中的某一项，是一个json对象获取用某个特殊字符分隔的字符串$.get("10-3.php",function(data){

str=data.split("|");

vartr="<tr><td>"+str[0]+"</td><td>"+str[1]+"</td><td>"+str[2]+"</td><tdstyle='color:red'>"+str[3]+"</td><td>"+str[4]+"</td></tr>";

$("#disp").append(tr); });

将字符串切分后装入各个HTML元素中10.2以Ajax方式查找数据查询数据先要发送一个查询关键字〔关键字通常是用户在表单中输入的〕给效劳器端程序，效劳器根据该关键字进行查询，得到特定的结果集，再将查询结果发送给客户端Ajax中，可以异步发送查询数据给效劳器，然后再用回调函数接收从效劳器返回的查询结果。10.2.1无刷新查询数据的实现10.2.2查找数据的应用举例1.制作级联下拉框2.异步方式检测用户名是否可用$("#user").blur(function(){ user=$("#user").val(); $.get('10-9.php',{username:user,n:Math.random()},function(data){…}3.制作带自动提示功能的输入框当用户在文本框中键入字符后〔根据文本框中的值是否改变〕，就调用findroutes()函数

获取用户输入的内容，然后将其异步提交到效劳器查询以它开头的内容制作异步加载子菜单项的树型菜单4.制作Ajax无刷新登录系统单击登录按钮后，就先判断是否输入了用户名和密码，如果输入了，就将用户名和密码发送给10-11.php进行查询4.制作Ajax无刷新登录系统(2)10-12.html在页面加载时不能够显示登录表单，而是根据用户是否具有Session或是否输入了正确的密码来判断是载入登录成功的界面〔loginok()〕还是载入未登录时的表单界面〔loginno()〕5.制作异步加载新闻的新闻网站首页6.制作股票查询系统通过异步请求的方式向某些网站发出请求，那么它会返回相应的实时股票数据7.制作动态载入内容的弹出框当鼠标经过某条记录时，才异步载入这条记录带有的图片，这样在翻开网页时，并没有加载任何图片，而是根据用户的操作再加载对应的图片在电子商务网站中广泛应用10.3以Ajax方式添加记录将用户在表单中输入的数据作为$.post()方法的data参数发送给效劳器。效劳器端获取到数据后，先将这些数据作为一条记录插入到表中，然后再重新读取更新后的表中的所有数据并输出给客户端。客户端页面将效劳器返回的数据载入到一个容器元素中，就可以显示添加记录后的数据表了添加记录的实现$.post("10-16.php", { title:escape(title), author:escape(author),email:escape(email), content:escape(content),act:"add" }, function(data){ $("#title").val(''); $("#author").val(''); $("#email").val('');$("#content").val('');$("#make").html(data); });10.3.2在效劳器端和客户端分别添加记录10-16.php

echo1 10-15.php

function(data){

if(data==1){ $("#title").val('');$("#author").val(''); $("#email").val('');$("#content").val('');

varnewtr="<tr><td>"+title+"</td><td>"+content+"</td><td>"+author+"</td><td>"+email+"</td></tr>"; $("#make").prepend(newtr); }}10.3.3制作无刷新评论系统10.3.4制作无刷新购物车程序10.4以Ajax方式修改记录修改记录的过程实际上可分为两步：①根据ID查找记录并将要修改的记录显示在表单中②用户在表单中修改信息并单击“修改”按钮后，就会调用函数modify1(id)，并将这条记录的id传递给该函数，该函数首先获取用户在表单中输入的内容，将这些内容连同记录的id一起发送给效劳器端页面，效劳器端页面根据id找到记录进行修改，修改完成后发送数据1给客户端表示修改成功，客户端收到1后，就在页面上单独更新记录所在行的数据。10.4.2制作无刷新投票系统10.5以Ajax方式删除记录当用户单击“删除”链接时，将调用函数del1(id)，并将记录的id值传递给该函数，函数del1(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(){ delsel[delsel.length]=this.value; });idstr=delsel.join(); $.get("10-19.php",{id:idstr,act:"del"}, function(data) { if(data==1){ for(iindelsel){ kk="fff"+delsel[i]; s=document.getElementById(kk); $(s).remove(); }} }); 10.6以Ajax方式进行记录集分页每个分页链接不再指向一个URL地址，而是链接到一个分页的函数，该函数中有一个参数用来传递页码给效劳器functiongetweblist(str){

$.get("10-21.php",{act:"list",pageNo:str}, //发送页码给10-21.php function(data) { $("#list").html(data); }10.6.2可设置每页显示记录数的分页程序10.6.3同时具有删除记录功能的分页程序functiondel1(id,str) {

$.get(“10-25.php”,{id:id,act:“del”,pageNo:str},

function(data) {

$(“#list”).html(data); }); }原始的Ajax程序与jQueryAjax程序的比较原始的AjaxjQueryAjax程序载入文档XMLHttpRequest对象的实例的open()方法如：xmlHttpReq.open("GET","9-2.html",True);通过$.get()方法的第1个参数发送数据①通过URL字符串②通过XMLHttpRequest对象的send方法①通过$.get()方法的第2个参数②通过URL字符串服务器返回的数据存放在responseText或responseXML中回调函数function(data)中的data参数处理服务器返回数据的代码functionRequestCallBack(){ if(xmlHttpReq.readyState==4&&xmlHttpReq.status==200){ //位于此处 } }function(data) { //位于此处 }XMLHttpRequest对象的方法方法说明open()创建一个新的HTTP请求，并指定此请求的方式、URL以及是否异步发送send()发送请求给服务器setRequestHeader()在发送请求之前，单独指定请求的某个HTTP头getAllResponseHeaders()获取响应的所有HTTP头getResponseHeader()从响应信息中根据HTTP头的名字获取指定的HTTP头abort停止发送当前请求10.7.2调试Ajax程序的方法首先执行后台页面，看后台页面运行是否正常如果该动态页面不需要获取参数就可以运行，那么直接运行