前后端数据交互是每一名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>条 </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
}; });
首先，前端点击数据检索按钮；
——》执行showSimpleSearch()方法，该方法将检索关键字做简单去空格处理，同时指定后端要执行的action（这个一般在form表单中就有一次指定，此处做了双重指定）；
——》执行getData()方法，设置加载超时，置灰列表按钮；
——》发送submit()；
——》submit()方法将提交转换成jQuery的ajaxSubmit(optionsSearch)，这个里面的optionsSearch参数很重要了，它是一个对象；
——》后台执行对应的action，将数据封装到一个jsonMap中，通过action对应的XML配置文件将数据返回给前端；
——》前端收到数据后，执行下面optionsSearch对象中的回调函数抓取数据，数据以result参数的形式被送到前端；
——》前端接收到数据后，执行showData()进行自定义的数据展示。
这就是前后端数据交互的一个详细的完整流程。