Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
2013-11-20 19:46
1516 查看
经过上一篇博客,本节主要是来看实现的功能是后台的数据通过json数据传过来,前台修改的数据再传回数据库之后页面再次更新table中的数据;
图示:
实例:前台的代码
上面主要是设定table的属性,具体每个属性大家可以详细查中文文挡来深入学习
下面是关于增删改查的代码:
接下来是后台中的一般处理程序中的代码(主要是负责读取数据库中的数据)
首先是判断前台请求的是哪种方法:
查询中的方法:
这个过程很是漫长,在调试的过程中,遇到了各种各样的问题,主要是浏览器的缓存问题耽误了好长时间,龙哥给了大力的支持,通过实现此功能,对ajax,一般处理程序的理解深刻多了;框架的使用提高我们开发的效率;
Json+ajax数据界面不刷新,页面更加的贴近客户的需求,查询效率大大的提升。
接下来会给大家分享学习分页(自己查找资料中学习总结的知识),查询数据的分页的知识与实例。敬请期待……
图示:
实例:前台的代码
<%--表格显示区--%> <table id="tt" " title="设置打分规则" class="easyui-datagrid" style="width: auto; height: 400px;" idfield="itemid" pagination="true" iconcls=" icon-save" remoteSort="false" data-options="rownumbers:true, url:'JSONData.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20], method:'get',toolbar:'#tb' ," fitcolumns="true" striped="true"> <%--url是获取数据的地址--%> <%--url:'JSON.ashx/ProcessRequest'--%> <%-- 表格标题--%> <thead > <tr > <th data-options="field:'ScoreStyleID',checkbox:true"> 打分项目类别ID</th> <th data-options="field:'ScoreStyleName',width:100",sortable:"true">打分项目类别名称</th> <th data-options="field:'ScoreStyleState',width:120,align:'right'">打分项目类别描述</th> <th data-options="field:'Score',width:120,align:'right'">打分项目单位分数</th> <th data-options="field:'ScoreItem',width:100">打分项目单位</th> <th data-options="field:'AdminID',width:100">管理员</th> <th data-options="field:'PublishDate',width:100">发布时间</th> </tr> </thead> <%--表格内容--%> <tbody> </tbody> </table>
上面主要是设定table的属性,具体每个属性大家可以详细查中文文挡来深入学习
下面是关于增删改查的代码:
var url; //添加管理员 function newUser() { $('#dlg').dialog('open').dialog('setTitle', '添加管理员');//设定表头 $('#fm').form('clear');//清空窗体数据 document.getElementById("test").value = "add";//设定表示为后台调不同方法数据提供接口 } //修改管理员 function editUser() { $('#fm').form('clear'); var row = $('#tt').datagrid('getSelected'); if (row) { $('#dlg').dialog('open').dialog('setTitle', '修改管理员'); //绑定数据列表 $('#firstname').val(row.ScoreStyleName); $('#lastname').val(row.Score); $('#unit').val(row.ScoreItem); $('#message').val(row.ScoreStyleState); $('#ID').val(row.ScoreStyleID); document.getElementById("test").value = "modify";//设定表示为后台调不同方法数据提供接口 $('#fm').form('load', row); } } //保存信息 function saveUser() { //获取页面中输入的值 var firstname = document.getElementById("firstname").value; var lastname = document.getElementById("lastname").value; var test = document.getElementById("test").value; var unit = document.getElementById("unit").value;; var message = document.getElementById("message").value; var ID = document.getElementById("ID").value; //var t = "firstname=" + firstname + "&lastname=" + lastname + "&unit=" + unit + "&message=" + message + "&ID=" + ID; $('#fm').form('submit', { //设定地址与传递参数到后台 url: "JSONData.ashx?firstname=" + firstname + "&lastname=" + lastname + "&unit=" + unit + "&message=" + message + "&test=" + test + "&ID=" + ID, onSubmit: function () { return $(this).form('validate'); }, //判断结果是否正确 success: function (result) { if (result.indexOf("T") == 0) { alert('恭喜您,信息添加成功!') $('#dlg').dialog('close'); // 关闭窗口 $('#tt').datagrid('reload'); } else { alert('保存失败,请您核对!') } var result = eval('(' + result + ')'); if (result.success) { $('#dlg').dialog('close'); // close the dialog $('#tt').datagrid('reload'); $.message.alert('提示', '保存成功!', 'info'); // reload the user data } else { //$.messager.show({ // title: 'Error', // msg: result.msg //}); } } }); } //删除管理员 function removeUser() { document.getElementById("test").value = "delete";//设定表示为后台调不同方法数据提供接口 var test = document.getElementById("test").value; var row = $('#tt').datagrid('getSelected'); if (row) { $.messager.confirm('提示', '你确定要删除这条信息吗?', function (r) { if (r) { $('#fm').form('submit', { url: "JSONData.ashx?ID=" + row.ScoreStyleID + "&test=" + test, onSubmit: function () { }, //判断结果是否正确 success: function (result) { if (result.indexOf("T") == 0) { $('#dlg').dialog('close'); alert('恭喜您,信息删除成功!') // close the dialog $('#tt').datagrid('reload'); //$('#fm').form('submit'); } else { alert('添加失败,请重新操作!') } var result = eval('(' + result + ')'); } }); } } ); } } //查询并把数据传递给后台,数组 function getQueryParams(queryParams) { var StartTime = $("#StartTime").datebox("getValue"); var EndTime = $("#EndTime").datebox("getValue"); var KeyWord = document.getElementById("KeyWord").value; var Category = $("#Category").combobox("getValue"); queryParams.StartTime = StartTime; queryParams.EndTime = EndTime; queryParams.KeyWord = KeyWord; queryParams.Category = Category; return queryParams; } //增加查询参数,重新加载表格 function reloadgrid() { //查询参数直接添加在queryParams中 var queryParams = $('#tt').datagrid('options').queryParams; getQueryParams(queryParams); $('#tt').datagrid('options').queryParams = queryParams;//传递值 $("#tt").datagrid('reload');//重新加载table }
接下来是后台中的一般处理程序中的代码(主要是负责读取数据库中的数据)
首先是判断前台请求的是哪种方法:
/// <summary> /// 条件查询公告 /// </summary> /// <param name="context"></param> public void ProcessRequest(HttpContext context)//context中包含前台与后台来回传递的值 {//判断前台请求的是增删改查的哪一个 string command = context.Request.QueryString["test"];//前台传的标示值 if (command == "add") {//调用添加方法 Add(context); } else if (command == "delete") {//调用删除方法 Delete(context); } else if (command == "modify") {//调用修改方法 Modify(context); } else {//调用查询方法 Query(context); } }
查询中的方法:
//================================================================ //获取分页和排序信息:页大小,页码,排序方式,排序字段 int pageRows, page; pageRows = 10; page = 1; string order, sort, oderby; order = sort = oderby = ""; if (null != context.Request.QueryString["rows"]) { pageRows = int.Parse(context.Request.QueryString["rows"].ToString().Trim()); } if (null != context.Request.QueryString["page"]) { page = int.Parse(context.Request.QueryString["page"].ToString().Trim()); } if (null != context.Request.QueryString["sort"]) { order = context.Request.QueryString["sort"].ToString().Trim(); } if (null != context.Request.QueryString["order"]) { sort = context.Request.QueryString["order"].ToString().Trim(); } //=================================================================== //组合查询语句:条件+排序 StringBuilder strWhere = new StringBuilder(); if (key != "") { strWhere.AppendFormat(" ScoreStyleName like '%{0}%' and ", key); } if (category != "") { strWhere.AppendFormat(" AdminID= '{0}' and ", category); } if (startTime != "") { strWhere.AppendFormat(" PublishDate >= '{0}' and ", startTime); } if (endTime != "") { strWhere.AppendFormat(" PublishDate <= '{0}' and ", endTime); } //删除多余的and int startindex = strWhere.ToString().LastIndexOf("and");//获取最后一个and的位置 if (startindex >= 0) { strWhere.Remove(startindex, 3);//删除多余的and关键字 } if (sort != "" && order != "") { //strWhere.AppendFormat(" order by {0} {1}", sort, order);//添加排序 oderby = order + " " + sort; } //DataSet ds = Bnotice.GetList(strWhere.ToString()); //调用不分页的getlist //调用分页的GetList方法 DataSet ds = scorebll.GetListByPage(strWhere.ToString(), oderby, (page - 1) * pageRows + 1, page * pageRows); int count = scorebll.GetRecordCount(strWhere.ToString());//获取条数 string strJson = ToJson.Dataset2Json(ds, count);//DataSet数据转化为Json数据 context.Response.Write(strJson);//返回给前台页面 context.Response.End();
这个过程很是漫长,在调试的过程中,遇到了各种各样的问题,主要是浏览器的缓存问题耽误了好长时间,龙哥给了大力的支持,通过实现此功能,对ajax,一般处理程序的理解深刻多了;框架的使用提高我们开发的效率;
Json+ajax数据界面不刷新,页面更加的贴近客户的需求,查询效率大大的提升。
接下来会给大家分享学习分页(自己查找资料中学习总结的知识),查询数据的分页的知识与实例。敬请期待……
相关文章推荐
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- EasyUI+Ajax+Json+一般处理程序实现数据的前台与后台的交互
- EasyUI+Ajax+Json+一般处理程序实现数据的前台与后台的交互
- ASP.NET利用JQuery中的Aajax实现JSON数据后台交互
- 《项目经验》--后台一般处理程序向前台JS文件传递JSON,JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- 用jquery +ajax 实现与php后台交互json数据
- 《项目经验》--后台一般处理程序向前台JS文件传递JSON,JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中
- AJAX提交到Handler.ashx一般处理程序返回json数据
- Struct2前台后台数据交互jquery+ajax
- jquery与后台进行数据交互--前台发单一数据对象,后台返回一个json字符串 jsp页面
- 利用json处理jquery和后台的数据交互的例子
- struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及文件上传的部分
- jquery的$.ajax()利用json数据类型与php后台交互
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表
- struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及非文件上传的部分
- 《项目经验》--通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中