Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互

点击前往：转载地址

经过上一篇博客，本节主要是来看实现的功能是后台的数据通过json数据传过来，前台修改的数据再传回数据库之后页面再次更新table中的数据；

 图示：

 

实例：前台的代码

[html]  view plain  copy

1. <span style="font-size:18px;">   <%--表格显示区--%>  
2.     <table id="tt" " title="设置打分规则" class="easyui-datagrid" style="width: auto;  
3.  height: 400px;" idfield="itemid" pagination="true" iconcls="                                                                icon-save" remoteSort="false"   
4.         data-options="rownumbers:true,  
5.         url:'JSONData.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],  
6.         method:'get',toolbar:'#tb' ," fitcolumns="true" striped="true">  
7.        <%--url是获取数据的地址--%>  
8.        <%--url:'JSON.ashx/ProcessRequest'--%>  
9.          <%-- 表格标题--%>  
10.         <thead >  
11.             <tr >  
12.                <th  data-options="field:'ScoreStyleID',checkbox:true"> 打分项目类别ID</th>  
13.                 <th  data-options="field:'ScoreStyleName',width:100",sortable:"true">打分项目类别名称</th>  
14.                 <th  data-options="field:'ScoreStyleState',width:120,align:'right'">打分项目类别描述</th>  
15.                 <th  data-options="field:'Score',width:120,align:'right'">打分项目单位分数</th>  
16.                 <th  data-options="field:'ScoreItem',width:100">打分项目单位</th>  
17.                 <th  data-options="field:'AdminID',width:100">管理员</th>                                               
18.                 <th  data-options="field:'PublishDate',width:100">发布时间</th>  
19.             </tr>  
20.         </thead>  
21.          <%--表格内容--%>  
22.         <tbody>  
23.             
24.         </tbody>  
25.     </table></span>  

上面主要是设定table的属性，具体每个属性大家可以详细查中文文挡来深入学习

下面是关于增删改查的代码：

[javascript]  view plain  copy

1. <span style="font-size:18px;"> var url;  
2.         //添加管理员  
3.         function newUser() {  
4.             $('#dlg').dialog('open').dialog('setTitle', '添加管理员');//设定表头  
5.             $('#fm').form('clear');//清空窗体数据  
6.             document.getElementById("test").value = "add";//设定表示为后台调不同方法数据提供接口  
7.   
8.         }  
9.         //修改管理员  
10.         function editUser() {  
11.             $('#fm').form('clear');  
12.             var row = $('#tt').datagrid('getSelected');  
13.             if (row) {  
14.                 $('#dlg').dialog('open').dialog('setTitle', '修改管理员');  
15.                 //绑定数据列表  
16.                 $('#firstname').val(row.ScoreStyleName);  
17.                 $('#lastname').val(row.Score);  
18.                 $('#unit').val(row.ScoreItem);  
19.                 $('#message').val(row.ScoreStyleState);  
20.                 $('#ID').val(row.ScoreStyleID);  
21.                 document.getElementById("test").value = "modify";//设定表示为后台调不同方法数据提供接口  
22.                 $('#fm').form('load', row);  
23.   
24.             }  
25.         }  
26.         //保存信息  
27.         function saveUser() {  
28.             //获取页面中输入的值  
29.             var firstname = document.getElementById("firstname").value;  
30.             var lastname = document.getElementById("lastname").value;  
31.             var test = document.getElementById("test").value;  
32.             var unit = document.getElementById("unit").value;;  
33.             var message = document.getElementById("message").value;  
34.             var ID = document.getElementById("ID").value;  
35.             //var t = "firstname=" + firstname + "&lastname=" + lastname + "&unit=" + unit + "&message=" + message + "&ID=" + ID;  
36.   
37.   
38.             $('#fm').form('submit', {  
39.                 //设定地址与传递参数到后台  
40.                 url: "JSONData.ashx?firstname=" + firstname + "&lastname=" + lastname + "&unit=" + unit + "&message=" + message + "&test=" + test + "&ID=" + ID,  
41.                 onSubmit: function () {  
42.                     return $(this).form('validate');  
43.                 },  
44.                 //判断结果是否正确  
45.                 success: function (result) {  
46.                     if (result.indexOf("T") == 0) {  
47.   
48.                         alert('恭喜您，信息添加成功！')  
49.                         $('#dlg').dialog('close');      // 关闭窗口  
50.                         $('#tt').datagrid('reload');  
51.                     }  
52.                     else {  
53.                         alert('保存失败，请您核对！')  
54.                     }  
55.                     var result = eval('(' + result + ')');  
56.                     if (result.success) {  
57.                         $('#dlg').dialog('close');      // close the dialog  
58.                         $('#tt').datagrid('reload');  
59.                         $.message.alert('提示', '保存成功！', 'info');  
60.   
61.                         // reload the user data  
62.                     } else {  
63.                         //$.messager.show({  
64.                         //    title: 'Error',  
65.                         //    msg: result.msg  
66.                         //});  
67.                     }  
68.                 }  
69.             });  
70.         }  
71.         //删除管理员  
72.         function removeUser() {  
73.             document.getElementById("test").value = "delete";//设定表示为后台调不同方法数据提供接口  
74.             var test = document.getElementById("test").value;  
75.             var row = $('#tt').datagrid('getSelected');  
76.             if (row) {  
77.                 $.messager.confirm('提示', '你确定要删除这条信息吗？', function (r) {  
78.                     if (r) {  
79.                         $('#fm').form('submit', {  
80.                             url: "JSONData.ashx?ID=" + row.ScoreStyleID + "&test=" + test,  
81.                             onSubmit: function () {  
82.                             },  
83.                             //判断结果是否正确  
84.                             success: function (result) {  
85.                                 if (result.indexOf("T") == 0) {  
86.                                     $('#dlg').dialog('close');  
87.                                     alert('恭喜您，信息删除成功！')  
88.                                     // close the dialog  
89.                                     $('#tt').datagrid('reload');  
90.                                     //$('#fm').form('submit');  
91.                                 }  
92.                                 else {  
93.                                     alert('添加失败，请重新操作！')  
94.                                 }  
95.                                 var result = eval('(' + result + ')');  
96.                                   
97.                             }  
98.                         });  
99.                     }  
100.                 }  
101.                 );  
102.             }  
103.         }  
104.         //查询并把数据传递给后台，数组  
105.         function getQueryParams(queryParams) {  
106.             var StartTime = $("#StartTime").datebox("getValue");  
107.             var EndTime = $("#EndTime").datebox("getValue");  
108.             var KeyWord = document.getElementById("KeyWord").value;  
109.             var Category = $("#Category").combobox("getValue");  
110.             queryParams.StartTime = StartTime;  
111.             queryParams.EndTime = EndTime;  
112.             queryParams.KeyWord = KeyWord;  
113.             queryParams.Category = Category;  
114.             return queryParams;  
115.         }  
116.   
117.         //增加查询参数，重新加载表格  
118.         function reloadgrid() {  
119.   
120.             //查询参数直接添加在queryParams中      
121.   
122.             var queryParams = $('#tt').datagrid('options').queryParams;  
123.             getQueryParams(queryParams);  
124.             $('#tt').datagrid('options').queryParams = queryParams;//传递值  
125.   
126.             $("#tt").datagrid('reload');//重新加载table  
127.   
128.         }</span>  

 接下来是后台中的一般处理程序中的代码（主要是负责读取数据库中的数据）

首先是判断前台请求的是哪种方法：

[csharp]  view plain  copy

1. <span style="font-size:18px;">/// <summary>  
2.         /// 条件查询公告  
3.         /// </summary>  
4.         /// <param name="context"></param>  
5.         public void ProcessRequest(HttpContext context)//context中包含前台与后台来回传递的值  
6.         {//判断前台请求的是增删改查的哪一个  
7.             string command = context.Request.QueryString["test"];//前台传的标示值  
8.             if (command == "add")  
9.             {//调用添加方法  
10.                 Add(context);  
11.             }  
12.             else if (command == "delete")  
13.             {//调用删除方法  
14.                 Delete(context);  
15.             }  
16.             else if (command == "modify")  
17.             {//调用修改方法  
18.                 Modify(context);  
19.             }  
20.             else  
21.             {//调用查询方法  
22.                 Query(context);  
23.             }  
24.         }  
25. </span>  

 

 查询中的方法：

[csharp]  view plain  copy

1. <span style="font-size:18px;"> //================================================================  
2.             //获取分页和排序信息：页大小，页码，排序方式，排序字段  
3.             int pageRows, page;  
4.             pageRows = 10;  
5.             page = 1;  
6.             string order, sort, oderby; order = sort = oderby = "";  
7.             if (null != context.Request.QueryString["rows"])  
8.             {  
9.                 pageRows = int.Parse(context.Request.QueryString["rows"].ToString().Trim());  
10.   
11.             }  
12.             if (null != context.Request.QueryString["page"])  
13.             {  
14.   
15.                 page = int.Parse(context.Request.QueryString["page"].ToString().Trim());  
16.   
17.             }  
18.             if (null != context.Request.QueryString["sort"])  
19.             {  
20.   
21.                 order = context.Request.QueryString["sort"].ToString().Trim();  
22.   
23.             }  
24.             if (null != context.Request.QueryString["order"])  
25.             {  
26.   
27.                 sort = context.Request.QueryString["order"].ToString().Trim();  
28.   
29.             }  
30.   
31.   
32.             //===================================================================  
33.             //组合查询语句：条件+排序  
34.             StringBuilder strWhere = new StringBuilder();  
35.             if (key != "")  
36.             {  
37.                 strWhere.AppendFormat(" ScoreStyleName like '%{0}%' and ", key);  
38.             }  
39.             if (category != "")  
40.             {  
41.                 strWhere.AppendFormat(" AdminID= '{0}' and ", category);  
42.             }  
43.             if (startTime != "")  
44.             {  
45.                 strWhere.AppendFormat(" PublishDate >= '{0}' and ", startTime);  
46.             }  
47.             if (endTime != "")  
48.             {  
49.                 strWhere.AppendFormat(" PublishDate <= '{0}' and ", endTime);  
50.             }  
51.   
52.             //删除多余的and  
53.             int startindex = strWhere.ToString().LastIndexOf("and");//获取最后一个and的位置  
54.             if (startindex >= 0)  
55.             {  
56.                 strWhere.Remove(startindex, 3);//删除多余的and关键字  
57.             }  
58.             if (sort != "" && order != "")  
59.             {  
60.                 //strWhere.AppendFormat(" order by {0} {1}", sort, order);//添加排序  
61.                 oderby = order + " " + sort;  
62.             }  
63.             //DataSet ds = Bnotice.GetList(strWhere.ToString());  //调用不分页的getlist  
64.   
65.             //调用分页的GetList方法  
66.             DataSet ds = scorebll.GetListByPage(strWhere.ToString(), oderby, (page - 1) * pageRows + 1, page * pageRows);  
67.             int count = scorebll.GetRecordCount(strWhere.ToString());//获取条数  
68.             string strJson = ToJson.Dataset2Json(ds, count);//DataSet数据转化为Json数据  
69.             context.Response.Write(strJson);//返回给前台页面  
70.             context.Response.End();</span>  

      这个过程很是漫长，在调试的过程中，遇到了各种各样的问题，主要是浏览器的缓存问题耽误了好长时间，龙哥给了大力的支持，通过实现此功能，对ajax，一般处理程序的理解深刻多了；框架的使用提高我们开发的效率；         

      Json+ajax数据界面不刷新，页面更加的贴近客户的需求，查询效率大大的提升。

 

  接下来会给大家分享学习分页（自己查找资料中学习总结的知识），查询数据的分页的知识与实例。敬请期待……