web前后端数据交互

最新推荐文章于 2024-04-18 21:59:33 发布
weixin_33826609
最新推荐文章于 2024-04-18 21:59:33 发布
阅读量223
点赞数
文章标签：数据库
原文链接：http://www.cnblogs.com/pengineer/p/4763230.html
版权
　　前后端数据交互是每一名web程序员必须熟悉的过程，前后端的数据交互重点在于前端是如何获取后端返回的数据，毕竟后端一般情况下只需要将数据封装到一个jsonMap，然后return就完了。下面通过一个list.js来说明后端是如何将数据传到前端，前端是如何获取数据，并进行数据展示的。
/**
 * 列表方法
 * 1、列表页面显示列表内容的div容器ID为list_container
 * 2、列表页面模板区域textarea的ID为list_template
 * 3、列表页面显示列表页码下拉框的div容器ID为list_select
 * 4、列表页面选择页码到指定页的下拉框select的ID为list_goto
 * 5、列表页面检索按钮ID为list_button_query
 * 6、列表页面高级检索按钮ID为list_button_advsearch
 * 7、列表页面改变页面大小选择框ID为list_changepagesize
 * 8、列表页面当前页码隐藏表单的ID为list_pagenumber
 * 9、列表页面排序列隐藏表单的ID为list_sortcolumn
 * 10、列表页面检索form的ID为search
 * 11、列表页面功能form的ID为list
 * 
 * init 初始化参数，可自定义参数如下所示：
 * var nameSpace = "role";
 * {
 *     "nameSpace":nameSpace,
 *     "sortColumnId":["sortcolumn0","sortcolumn1","sortcolumn2"],
 *     "sortColumnValue":{"sortcolumn0":0,"sortcolumn1":1,"sortcolumn2":2},
 *     "listType":(0-常规列表(默认值),1-弹出层单选列表,2-弹出层复选列表,3-查看页面内嵌列表)
 * }
 * @author gongfan, zhouzj
 * @version 1.1
 * @depends 参考seajs文档，依赖模块在require中定义
 */
define(function(require, exports, module) {
    require('form');
    require('tool/highcharts/highcharts');
    require.async('tool/highcharts/exporting');
    var json = {}; // 服务器端返回的json对象
    var data = []; // 客户端列表分页缓存对象
    var itemNumber;// 总记录数
    var pageSize;// 每页显示数
    var pageNumber;// 总页数
    var currentPageNo;// 当前页码
    var pageInfo;// 页面信息，总记录数、总页数等
    var pageSelect;// 页码输入框
    var pageBackNumber;// 服务器端返回的页数
    var startPageNumber;// 当前缓存区段的起始页码
    var dealWith;//附加处理函数
    var dealWithBefore;//用来对模版或数据进行处理
    var nameSpace;// URL前缀
    var selectedTab;//标签定位
    var sortColumnId;// 支持排序的列ID
    var sortColumnValue;// 排序列的值
    var listType;// (0-常规列表,1-弹出层单选列表,2-弹出层复选列表)
    var viewParam;//查看详情时向后台传的参数
    var truncateSettings;//截断显示设置
    
    /**
     * 字符串截断
     * string : 字符串
     * length : 截断长度(汉字为长度1;其它字符为长度0.5)
     * append : 补充串
    */
    var setTruncate = function(string, length, append){
        if(typeof s != "string" || !/^[1-9]\d*$/.test("" + length)){return string;}
        var os = string, count = 0, sub = "";
        while(/[\u4E00-\u9FFF]/.test(string)){
            string = string.replace(/[\u4E00-\u9FFF]/, "");
            count++;
        }
        if(string.length/2 + count > length){
            var cnt = 0, len = 0;
            for(var i = 0; i < os.length; i++){
                if(/[\u4E00-\u9FFF]/.test(os.charAt(i).toString())){
                    cnt += 2;                
                } else {
                    cnt++;
                }
                len++;
                if(cnt/2 >= length){
                    sub = os.substring(0, len) + ((append) ? append : "");
                    break;
                }
            }
        } else {
            sub = os;
        }
        return sub;
    };
    // 截断显示
    var doTruncateShow = function(){
        if(!truncateSettings){return;}
        $(truncateSettings).each(function(){
            var $this = this;
            $("." + $this["className"]).each(function(){
                var value = $(this).html().toString();
                $(this).html(setTruncate(value, $this["length"], "..."))
                    .bind("mouseover", function(){
                        //$(this).html(value);
                        $(this).attr("title", value);
                    }).bind("mouseout", function(){
                        $(this).html(setTruncate(value, $this["length"], "..."));
                });
            });
        });
    };
    var getData = function() {// 获取数据
        if (parent != null && listType == 0) {
            parent.loading_flag = true;
            setTimeout("parent.showLoading();", parent.loading_lag_time);
        }
        $("#list_first, #list_previous, #list_next, #list_last").attr("disabled", true);
        $("#search").submit();
    };
    var loadTemplate = function(listjson) {// 加载模板
        dealWithBefore(listjson, json);
        $("#list_container").hide();
        $("#list_container").html(TrimPath.processDOMTemplate("list_template", listjson));
        setOddEvenLine("list_container", listType);// 设置奇偶行效果
        if (typeof(listjson.root) == "undefined" || listjson.root.length == 0) {
            setColspan("list_table");// 设置空列表提示的跨列数
        }
        dealWith(json);
        $("#list_container").show();
        if (parent != null && listType == 0) {
            parent.loading_flag = false;
            parent.hideLoading();
        }
        if($("#checkedIds").length > 0){
            checkIds();
        }
    };
    var showPageNo = function() {// 加载页码及翻页按钮
        var tr = $("#list_container").find("table").eq(1).find("tr");// 列表最后一行
        // 生成总记录数、每页显示条数
        if (listType == 0) {
            pageInfo = $("<td align='right' style='color:#FFF;'></td>")
            $("<span class='text_white'>共</span>").appendTo(pageInfo);
            $("<span id='list_itemNumber'></span>").appendTo(pageInfo);
            $("<span>条&nbsp;</span>").appendTo(pageInfo); $("<span>每页</span>").appendTo(pageInfo); var pageSizeSelect = $("<select id='list_changepagesize'></select>"); $("<option value='10'>10</option>").appendTo(pageSizeSelect); $("<option value='20'>20</option>").appendTo(pageSizeSelect); $("<option value='50'>50</option>").appendTo(pageSizeSelect); pageSizeSelect.appendTo(pageInfo); $("<span>条&nbsp</span>").appendTo(pageInfo); tr.append(pageInfo); $("#list_itemNumber").html(itemNumber);// 显示总记录数 $("#list_changepagesize").attr("value", json.pageSize);// 设置页面表单，每页显示数 } // 生成翻页 tr.append($("<td width='24' align='center'><img id='list_first' src='image/first_page.gif' title='首页' class='to_page'/></td>")); tr.append($("<td width='24' align='center'><img id='list_previous' src='image/prev_page.gif' title='上一页' class='to_page'/></td>")); tr.append($("<td width='24' align='center'><img id='list_next' src='image/next_page.gif' title='下一页' class='to_page'/></td>")); tr.append($("<td width='24' align='center'><img id='list_last' src='image/last_page.gif' title='末页' class='to_page'/></td>")); tr.append($("<td class='text_white'></td>").append("<span>第</span>").append(pageSelect).append($("<span>/" + pageNumber + "</span>")).append("<span>页</span>")); var td = tr.find("td:last-child");// 根据内容确定最后一个单元格的宽度 var goto_width = $("#list_goto").width(); td.css("width", 38 + goto_width * 2 + "px"); td.css("text-align", "left"); $("#list_sortcolumn").attr("value", json.sortColumn);// 设置页面隐藏表单，当前排序 if (pageNumber == 0) { $("#list_goto").attr("value", 0);// 设置到指定页表单 $("#list_pagenumber").val(0); } else { $("#list_goto").attr("value", currentPageNo);// 设置到指定页表单 $("#list_pagenumber").val(currentPageNo); } $(".session").each(function(){ $(this).html(Num2Chinese(parseInt($(this).html()))); }); // 如是弹出层选择页面，则设置默认选中 if($("#trimedName").size() > 0){ defaultSelected(); } }; var showFirstPage = function() {// 首页 if($("#checkedIds").length > 0){updateCheckedIds();} if (pageNumber != 0) { if (currentPageNo != 1) { if (currentPageNo > data.length) { currentPageNo = 1; $("#list_pagenumber").attr("value", currentPageNo); $("#search").attr("action", nameSpace + "/toPage.action"); getData(); } else { currentPageNo = 1; $("#list_pagenumber").attr("value", currentPageNo); loadTemplate(data[0]); showPageNo(); } } } }; var showPreviousPage = function() {// 上页 if($("#checkedIds").length > 0){updateCheckedIds();} if (pageNumber != 0) { if (currentPageNo != 1) { currentPageNo--; $("#list_pagenumber").attr("value", currentPageNo); // if (currentPageNo % pageBackNumber == 0) { if (currentPageNo < startPageNumber) { $("#search").attr("action", nameSpace + "/toPage.action"); getData(); } else { // loadTemplate(data[currentPageNo % pageBackNumber - 1]); loadTemplate(data[currentPageNo - startPageNumber]); showPageNo(); } } } }; var showNextPage = function() {// 下页 if($("#checkedIds").length > 0){updateCheckedIds();} if (pageNumber != 0) { if (currentPageNo != pageNumber) { currentPageNo++; $("#list_pagenumber").attr("value", currentPageNo); if (currentPageNo >= startPageNumber + pageBackNumber) { $("#search").attr("action", nameSpace + "/toPage.action"); getData(); } else { loadTemplate(data[currentPageNo - startPageNumber]); showPageNo(); } } } }; var showLastPage = function() {// 末页 if($("#checkedIds").length > 0){updateCheckedIds();} if (pageNumber != 0) { if (currentPageNo != pageNumber) { currentPageNo = pageNumber; $("#list_pagenumber").attr("value", currentPageNo); if (startPageNumber + data.length - 1 < currentPageNo) { $("#search").attr("action", nameSpace + "/toPage.action"); getData(); } else { loadTemplate(data[data.length - 1]); showPageNo(); } } } }; var showGoTo = function() {// 到指定页 if($("#checkedIds").length > 0){updateCheckedIds();} var oldPageNo = $("#list_pagenumber").val(); currentPageNo = $("#list_goto").val(); if (currentPageNo <= pageNumber && currentPageNo >= 1) { $("#list_pagenumber").attr("value", currentPageNo); if (currentPageNo >= startPageNumber && currentPageNo <= startPageNumber + data.length - 1) { loadTemplate(data[currentPageNo - startPageNumber]); showPageNo(); } else { $("#search").attr("action", nameSpace + "/toPage.action"); getData(); } } else { $("#list_goto").val(oldPageNo); } }; var showPageSize = function() {// 改变列表大小 $("#list_pagesize").attr("value", $("#list_changepagesize").val()); $("#search").attr("action", nameSpace + "/changePageSize.action"); getData(); }; var showSort = function(sortColumn) {// 排序 $("#list_sortcolumn").attr("value", sortColumn); $("#list_pagenumber").attr("value", $("#list_goto").val()); $("#search").attr("action", nameSpace + "/sort.action"); getData(); }; var Highch = function() { $.ajax({ url: nameSpace + "/assist.action", type: "post", dataType: "json", success: function(result) { if (result.errorInfo == null || result.errorInfo == "") { initHighcharts(result); } else { alert(result.errorInfo); } return false; } }) }; var showSimpleSearch = function() {// 检索 var keyword = $("#keyword").val().trim(); $("#keyword").val(keyword); $("#search").attr("action", nameSpace + "/simpleSearch.action"); if($("#checkedIds").length > 0){//检索时要判断是否有checkedIds，如果有要清空 $("#checkedIds").attr("value", ""); }; getData(); }; var showData = function() {// 显示数据 itemNumber = json.totalRows;// 初始化总记录数 pageBackNumber = json.pageBackNumber;// 初始化后台返回页数 pageSize = json.pageSize;// 初始化每页显示数 pageNumber = 0;// 初始化总页数 if (itemNumber % pageSize == 0) { pageNumber = itemNumber / pageSize; } else { pageNumber = Math.floor(itemNumber / pageSize) + 1; } currentPageNo = json.pageNumber;// 初始化当前页码 startPageNumber = json.startPageNumber;// 初始化当前缓存起始页码 pageSelect = $("<input id='list_goto' type='text' style='width:" + getNumberLength(pageNumber) + "; height:14px; font-size:12px;' />");// 初始化页码下拉框 var tmpdata = []; var startRow = (json.startPageNumber - 1) * pageSize; for (var i = 0, j = 0, k = 0; i < json.laData.length; i++) { if (!tmpdata[j]) { tmpdata[j] = $.parseJSON('{"root": [], "sortColumn": -1, "sortColumnLabel": -1}'); } var root = {"laData": [], "num": 0}; root.laData = json.laData[i]; root.num = startRow + (json.pageSize * j) + (k + 1); tmpdata[j].root[k] = root; tmpdata[j].sortColumn = json.sortColumn; tmpdata[j].sortColumnLabel = json.sortColumnLabel; k++; if (i % pageSize == pageSize - 1) { j++; k = 0; } } data = tmpdata; if (data.length > 0) { loadTemplate(data[currentPageNo - startPageNumber]); // 加载初始页 } else { data = $.parseJSON('{"root": [], "sortColumn": -1, "sortColumnLabel": -1}'); data.sortColumn = json.sortColumn; data.sortColumnLabel = json.sortColumnLabel; loadTemplate(data); } showPageNo(); }; var optionssearch = { dataType: "json", success: function (result) { if (result.errorInfo == null || result.errorInfo == "") { if (result.totalRows > 50) { if(nameSpace.indexOf("project") != -1){ Highch(); } $("#container").show(); } else { $("#container").hide(); } json = result; showData(); } else { alert(result.errorInfo); } $("#list_first, #list_previous, #list_next, #list_last").attr("disabled", false); } }; var initHighcharts = function(json) { $('#container').highcharts({ chart : { type : 'column' }, title : { text : null }, subtitle: { text: json.xTitle + '分布情况（前十条）' }, xAxis : { categories : json.lTitle, title: { text: json.xTitle, } }, yAxis : { min : 0, title : { text : json.yTitle } }, legend: { enabled: false }, tooltip: { valueSuffix: '　条' }, plotOptions : { series : { pointWidth : 50 }, column : { pointPadding : 0.2, borderWidth : 0 } }, series : [ { name : json.yTitle, data : json.lData } ] }); } var optionslist = { dataType: "json", success: function (result) { if (result == undefined || result == null) {// 未知的错误异常 alert("未知的错误异常"); } else if (result.errorInfo == null || result.errorInfo == "") { $("#search").attr("action", nameSpace + "/toPage.action?update=1"); getData(); } else {// 已知的错误异常 alert(result.errorInfo); } $("#list_first, #list_previous, #list_next, #list_last").attr("disabled", false); } }; var getNumberLength = function(number) {// 根据数字的位数，确定输入框的宽度 var strNumber = "" + number; var length = strNumber.length + 1; return 7 * length + "px"; }; var initPageShow = function(init) { // 参数预处理 if(typeof(init.dealWith) == 'undefined'){ dealWith = function(){}; }else{ dealWith = init.dealWith; } if(typeof(init.dealWithBefore) == 'undefined'){ dealWithBefore = function(){}; }else{ dealWithBefore = init.dealWithBefore; } if (typeof(init.nameSpace) == 'undefined') { nameSpace = null; } else { nameSpace = init.nameSpace; } if (typeof(init.selectedTab) == 'undefined') { selectedTab = null; } else { selectedTab = init.selectedTab; } if (typeof(init.sortColumnId) == 'undefined') { sortColumnId = null; } else { sortColumnId = init.sortColumnId; } if (typeof(init.sortColumnValue) == 'undefined') { sortColumnValue = null; } else { sortColumnValue = init.sortColumnValue; } if (typeof(init.listType) == 'undefined') { listType = 0; } else { listType = init.listType; } if (typeof(init.viewParam) == 'undefined') { viewParam = null; } else { viewParam = init.viewParam; } if(typeof(init.truncateSettings) == 'undefined'){ truncateSettings = null; } else { truncateSettings = init.truncateSettings; } $("#advSearch").submit(function() { $(this).ajaxSubmit(optionssearch); return false; }); $("#search").submit(function() {// 提交ajax请求，返回列表数据 $(this).ajaxSubmit(optionssearch); return false; }); $("#list").submit(function() { $(this).ajaxSubmit(optionslist); return false; }); getData(); $("#check").live("click", function() {// 全选 checkAll(this.checked, "entityIds"); }); $("#list_add").live("click", function() {// 添加按钮 var url = basePath + nameSpace + "/toAdd.action?type=1" if(viewParam != null && viewParam.listflag != undefined){ url += "&listflag=" + viewParam.listflag; } window.location.href = url; return false; }); $("#list_add_result").live("click", function() {// 项目中用到 var url = basePath + nameSpace + "/toAddResult.action?type=1" if(viewParam != null && viewParam.listflag != undefined){ url += "&listflag=" + viewParam.listflag; } window.location.href = url; return false; }); $("#list_delete").live("click", function() {// 删除按钮 var cnt = count("entityIds"); if (cnt == 0) { alert("请选择要删除的记录！"); } else { if (confirm("您确定要删除选中的记录吗？")) { if($("#checkedIds").length > 0){ $("#checkedIds").attr("value", ""); }; $("#type").attr("value", 1); $("#pagenumber").attr("value", $("#list_goto").val()); $("#list").attr("action", nameSpace + "/delete.action"); $("#list").submit(); } } return false; }); $("#list_funding").live("click", function() {// 批量拨款按钮 var cnt = count("entityIds"); if (cnt == 0) { alert("请选择要拨款的记录！"); } else { if (confirm("您确定要对选中的记录拨款吗？")) { if($("#checkedIds").length > 0){ $("#checkedIds").attr("value", ""); }; $("#type").attr("value", 1); $("#pagenumber").attr("value", $("#list_goto").val()); $("#list").attr("action", nameSpace + "/funding.action"); $("#list").submit(); } } return false; }); $(".link1").live("click", function(){// 点击进入查看页面 //var url = basePath + nameSpace + "/toView.action?entityId=" + this.id + "&pageNumber=" + $("#list_pagenumber").val(); var url = ""; //不再需要页码 if(this.type == 8 || this.type == 10){//结项评审或者申请评审列表进入查看页面url url = basePath + nameSpace + "/toViewReview.action?entityId=" + this.id; //不再需要页码 }else{ url = basePath + nameSpace + "/toView.action?entityId=" + this.id; //不再需要页码 } url += (this.type) ? "&listType=" + this.type : "";//(项目列表类型先如是判别) url += (selectedTab != null) ? "&selectedTab=" + selectedTab : ""; if(viewParam != null && viewParam.listflag != undefined){ url += "&listflag=" + viewParam.listflag; } window.location.href = url; return false; }); $("#list_button_query").bind("click", function() {// 初级检索 showSimpleSearch(); return false; }); $("#list_search_more").click(function(){// 点击展开更多条件 $("#adv_search").slideToggle("slow"); $("#simple_search").hide(); $(this).attr("value", "更多条件"); }); $("#list_search_hide").click(function(){// 点击收起更多条件 $("#adv_search").slideToggle(50); $("#simple_search").show(); $(this).attr("value", "隐藏条件"); }); if($("#advFlag").val() == 1){ $("#adv_search").show(); $("#simple_search").hide(); $("#list_search_hide").attr("value", "隐藏条件"); } else { $("#adv_search").hide(); $("#simple_search").show(); $("#list_search_more").attr("value", "更多条件"); } $("#list_button_advSearch").live("click", function() { if (parent != null && listType == 0) { parent.loading_flag = true; setTimeout("parent.showLoading();", parent.loading_lag_time); } $("#advSearch").attr("action", nameSpace + "/advSearch.action"); $("#advSearch").submit(); return false; }); $("#list_changepagesize").live("change", function() {// 改变每页显示条目数量 showPageSize(); return false; }); $("#list_first").live("click", function() {// 首页 showFirstPage(); return false; }); $("#list_previous").live("click", function() {// 上一页 showPreviousPage(); return false; }); $("#list_next").live("click", function() {// 下一页 showNextPage(); return false; }); $("#list_last").live("click", function() {// 末页 showLastPage(); return false; }); $("#keyword").live("keypress", function(event) {// 给检索添加键盘事件，回车提交 var keyCode = event.which; if (keyCode == 13) { showSimpleSearch(); return false; } else { return true; } }); $("#list_goto").live("click", function(){// 点击选中页码，给换页绑定回车及弹出事件 this.select(); }).live("keypress", function(event) { var keyCode = event.which; if (keyCode == 13) { showGoTo(); return false; } else { return true; } }).live("blur", function(event) { showGoTo(); }); if (sortColumnId != null && sortColumnValue != null) { for (var i = 0; i < sortColumnId.length; i++) { $("#" + sortColumnId[i]).live("click", function(){ showSort(sortColumnValue[this.id]); return false; }); } } // 点击单个的checkbox时，维护全选框的状态 $("input[name='entityIds']").live("click", function() { var checkbox_length = $("input[name='entityIds']").length; var cnt = count("entityIds");// 当前已选中的个数 if (this.checked) {// 当有项被选中时，判断当前是否已全选了 if (cnt == checkbox_length) { $("#check").eq(0).attr("checked", true); } } else {// 当有项撤销选中时，判断头是否处于非全选状态 $("#check").eq(0).attr("checked", false); } }); }; /** * 将本页所选id和之前保存的id拼接并放入checkedIds隐藏域。 * 在离开本页前需执行此方法。 * @memberOf {TypeName} */ var updateCheckedIds = function(){ var checkedIds = $("#checkedIds").val(); $("input[name='entityIds']").each(function() { var idx = checkedIds.indexOf(this.value); if (this.checked && (idx == -1)) {// 选择不在隐藏域保存的id checkedIds += $(this).val() + ","; } else if(!this.checked && (idx != -1)) {// 取消选择隐藏域中的id var left = checkedIds.substring(0, idx); var right = checkedIds.substring(idx); checkedIds = left + right.substring(right.indexOf(",") + 1); } }); $("#checkedIds").attr("value",checkedIds); }; /** * 翻页（loadTemplate）之后将已选项勾选 * @memberOf {TypeName} */ var checkIds = function(){ var checkedIds = $("#checkedIds").val(); $("input[name='entityIds']").each(function() { if (checkedIds.indexOf(this.value) != -1) { this.checked = true; } }); }; module.exports = { pageShow: function(init) {initPageShow(init);}, getData: function() {getData();}, // 提供给一些模块的添加和删除按钮重写 selectedTab: selectedTab, viewParam: viewParam }; });
　　首先，前端点击数据检索按钮；
——》执行showSimpleSearch()方法，该方法将检索关键字做简单去空格处理，同时指定后端要执行的action（这个一般在form表单中就有一次指定，此处做了双重指定）；
——》执行getData()方法，设置加载超时，置灰列表按钮；
——》发送submit()；
——》submit()方法将提交转换成jQuery的ajaxSubmit(optionsSearch)，这个里面的optionsSearch参数很重要了，它是一个对象；
——》后台执行对应的action，将数据封装到一个jsonMap中，通过action对应的XML配置文件将数据返回给前端；
——》前端收到数据后，执行下面optionsSearch对象中的回调函数抓取数据，数据以result参数的形式被送到前端；
——》前端接收到数据后，执行showData()进行自定义的数据展示。
　　这就是前后端数据交互的一个详细的完整流程。
转载于:https://www.cnblogs.com/pengineer/p/4763230.html