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

PHP Web程序设计与Ajax技术 唐四薪 主编 第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) { var tr = trtd + item.title + /tdtd + item.content + /tdtd + item.author + /tdtd style=color:red + item.email + /tdtd + item.ip + /td/tr; $(#disp).append(tr); }); }); 获取用某个特殊字符分隔的字符串 $.get(10-3.php, function(data) { str=data.split(|);  var tr = trtd + str[0]+ /tdtd + str[1]+ /tdtd + str[2] + /tdtd style=color:red + str[3] + /tdtd + str[4] + /td/tr;$(#disp).append(tr); }); 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),