web先後端數據交互
先後端數據交互是每一名web程序員必須熟悉的過程，先後端的數據交互重點在於前端是如何獲取後端返回的數據，畢竟後端通常狀況下只須要將數據封裝到一個jsonMap，而後return就完了。下面經過一個list.js來講明後端是如何將數據傳到前端，前端是如何獲取數據，並進行數據展現的。css
/**
* 列表方法
* 一、列表頁面顯示列表內容的div容器ID爲list_container
* 二、列表頁面模板區域textarea的ID爲list_template
* 三、列表頁面顯示列表頁碼下拉框的div容器ID爲list_select
* 四、列表頁面選擇頁碼到指定頁的下拉框select的ID爲list_goto
* 五、列表頁面檢索按鈕ID爲list_button_query
* 六、列表頁面高級檢索按鈕ID爲list_button_advsearch
* 七、列表頁面改變頁面大小選擇框ID爲list_changepagesize
* 八、列表頁面當前頁碼隱藏表單的ID爲list_pagenumber
* 九、列表頁面排序列隱藏表單的ID爲list_sortcolumn
* 十、列表頁面檢索form的ID爲search
* 十一、列表頁面功能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>條 </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>條 </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 }; });
首先，前端點擊數據檢索按鈕；html
——》執行showSimpleSearch()方法，該方法將檢索關鍵字作簡單去空格處理，同時指定後端要執行的action（這個通常在form表單中就有一次指定，此處作了雙重指定）；前端
——》執行getData()方法，設置加載超時，置灰列表按鈕；程序員
——》發送submit()；web
——》submit()方法將提交轉換成jQuery的ajaxSubmit(optionsSearch)，這個裏面的optionsSearch參數很重要了，它是一個對象；ajax
——》後臺執行對應的action，將數據封裝到一個jsonMap中，經過action對應的XML配置文件將數據返回給前端；json
——》前端收到數據後，執行下面optionsSearch對象中的回調函數抓取數據，數據以result參數的形式被送到前端；後端
——》前端接收到數據後，執行showData()進行自定義的數據展現。緩存
這就是先後端數據交互的一個詳細的完整流程。服務器
相關文章
- 1. 先後端數據交互
- 2. 先後端交互，API數據交互
- 3. web先後端交互
- 4. web先後端交互，nodejs
- 5. 先後端的數據交互
- 6. axios先後端數據交互
- 7. django先後端數據交互
- 8. 先後端數據交互小結
- 9. 先後端數據交互方法
- 10. 從axios看先後端數據交互
- 更多相關文章...
- • C# 交錯數組 - C#教程
- • ASP.NET Web Forms - 數據綁定 - ASP.NET 教程
- • Flink 數據傳輸及反壓詳解
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 先後端數據交互
- 2. 先後端交互，API數據交互
- 3. web先後端交互
- 4. web先後端交互，nodejs
- 5. 先後端的數據交互
- 6. axios先後端數據交互
- 7. django先後端數據交互
- 8. 先後端數據交互小結
- 9. 先後端數據交互方法
- 10. 從axios看先後端數據交互