电子商务网站开发与管理 教学课件 作者 唐四薪 谭晓兰 屈瑜君 7Ajax访问数据库.pptVIP

电子商务网站开发与管理 唐四薪 主编 人民邮电出版社 第7章 Ajax方式访问数据库 以Ajax方式访问数据库 Web应用程序配合Ajax技术则能设计出更加友好的交互效果。通过Ajax方式访问数据库可以 在静态页面上载入数据库中的数据 在无刷新的情况下查询数据库并更新显示查询结果 无刷新的情况下对数据库中数据进行添加、删除和修改 无刷新情况下对记录集进行分页 7.1 以Ajax方式显示数据 原理：在静态页中通过Ajax程序加载能显示数据的动态页 以原有格式显示数据 所加载的动态页含有HTML代码 以自定义的格式显示数据 加载的动态页是JSON格式的字符串 加载的动态页是用某个特殊字符分隔的字符串 7.1.1 以原有格式显示数据 首先制作一个显示数据表中数据的动态页面7-1.asp 然后再制作一个静态页面7-1.html，在该页面中放置一个容器元素（#disp），编写Ajax程序将动态页面7-1.asp载入到该容器中即可 7.1.2 以自定义的格式显示数据 如想在静态页面中对接收到的数据按指定的格式显示的话，则有两种方法： ① 返回JSON格式的字符串，将JSON数据以需要的格式显示。 ② 输出用某个特殊字符分隔的字符串，在客户端用split方法切分获取的数据，然后将这些数据以需要的格式显示。 ①获取JSON字符串 $.getJSON(10-2.asp, 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.asp, 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中，可以Ajax方式发送查询数据给服务器，然后再用回调函数接收从服务器返回的查询结果。 以Ajax方式查询数据 查询数据的关键程序 $.get(7-5.asp,{key:key,sel:sel, sid:Math.random()}, function(data){ $(#disp).html(data); }); 10.2.2 查找数据的应用举例 1. 制作级联下拉框 制作Ajax树形菜单 2. 异步方式检测用户名是否可用 $(#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.html在页面加载时不能够显示登录表单，而是根据用户是否具有Session或是否输入了正确的密码来判断是载入登录成功的界面（loginok()）还是载入未登录时的表单界面（loginno()） 5. 制作异步加载新闻的新闻网站首页 6. 制作股票查询系统 通过异步请求的方式向某些网站发出请求，则它会返回相应的实时股票数据 7. 制作动态载入内容的弹出框 当鼠标经过某条记录时，才异步载入这条记录带有的图片，这样在打开网页时，并没有加载任何图片，而是根据用户的操作再加载对应的图片 7.3以Ajax方式添加记录 将用户在表单中输入的数据作为$.post()方法的data参数发送给服务器。 服务器端获取到数据后，先将这些数据作为一条记录插入