电子商务网站开发与管理.ppt

以Ajax方式访问数据库Web应用程序配合Ajax技术则能设计出更加友好的交互效果。通过Ajax方式访问数据库可以在静态页面上载入数据库中的数据在无刷新的情况下查询数据库并更新显示查询结果无刷新的情况下对数据库中数据进行添加、删除和修改无刷新情况下对记录集进行分页7.1以Ajax方式显示数据原理：在静态页中通过Ajax程序加载能显示数据的动态页以原有格式显示数据所加载的动态页含有HTML代码以自定义的格式显示数据加载的动态页是JSON格式的字符串加载的动态页是用某个特殊字符分隔的字符串7.1.1以原有格式显示数据首先制作一个显示数据表中数据的动态页面7-1.asp然后再制作一个静态页面7-1.html，在该页面中放置一个容器元素（#disp），编写Ajax程序将动态页面7-1.asp载入到该容器中即可容器#disp7-1.asp7.1.2以自定义的格式显示数据如想在静态页面中对接收到的数据按指定的格式显示的话，则有两种方法：①返回JSON格式的字符串，将JSON数据以需要的格式显示。②输出用某个特殊字符分隔的字符串，在客户端用split方法切分获取的数据，然后将这些数据以需要的格式显示。①获取JSON字符串$.getJSON(10-2.asp,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.asp,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元素中提示：为减少服务器与浏览器之间传输的数据量，Ajax技术建议服务器端只输出纯数据给客户端（如JSON数据、XML数据或特殊字符串）10.2以Ajax方式查找数据查找数据先要发送一个查询关键字（关键字通常是用户在表单中输入的）给服务器端程序，服务器根据该关键字查询特定的数据表再将查询结果发送给客户端。在Ajax中，可以Ajax方式发送查询数据给服务器，然后再用回调函数接收从服务器返回的查询结果。以Ajax方式查询数据发送关键词给服务器载入服务器返回的查询结果1.发送表单中的数据给服务器functionAjax(){$.get(“9-11.asp”,

{user:$(“#user”).val(),comment:$(“#comment”).val()},

function(data){ $(#target).append(data); });}表单中的数据data参数遵循JSON对象形式补充：获取各种表单元素的数据varsingleValues=$(#single).val();varmultipleValues=$(#multiple).val()||[];varcheckboxValues=[];$(input:checkbox:checked).each(function(){checkboxValues[checkboxValues.length]=$(this).val(); });varradioValue=$(input:radio[name=r]:checked).val();一般用val()获取如果没有值，将空值赋给变量以URL字符串形式发送数据给服务器$.get方法也可以使用传统的url字符串方式发送数据给服务器。$.get(9-11.asp?user=+$(#user).val()+

comment=+$(#comment).val(),

function(data){…});服务器端程序可以用Request集合获取数据

%user=request.QueryString(user)