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

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=trtd+item.title+/tdtd+item.content+/tdtd+item.author+/tdtdstyle=color:red+item.email+/tdtd+item.ip+/td/tr;

$(#disp).append(tr); }); }); data是一个json数组，item是data中的某一项，是一个json对象

获取用某个特殊字符分隔的字符串$.get(10-3.php,function(data){

str=data.split(|);

vartr=trtd+str[0]+/tdtd+str[1]+/tdtd+str[2]+/tdtdstyle=color:red+str[3]+/tdtd+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, { titl