web前后端数据交互
前后端数据交互是每一名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()进行自定义的数据展示。
这就是前后端数据交互的一个详细的完整流程。
web前后端数据交互的更多相关文章
- 两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...
- 前后端数据交互(八)——请求方法 GET 和 POST 区别
WEB 开发同学一看 get 和 post 请求方法的区别,第一感觉都是 So easy! 学习ajax.fetch.axios时,发送网络请求携带参数时,都需要分别处理get和post的参数.所以我 ...
- vue-resource的使用,前后端数据交互
vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载: https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...
- 前后端数据交互处理基于原生JS模板引擎开发
json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...
- 对GraphQL-BFF:微服务背景下的前后端数据交互方案的研究-------引用
随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...
- 前后端数据交互利器--Protobuf
Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...
- SpringMVC前后端数据交互总结
控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是ser ...
- Spring MVC前后端数据交互总结
控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是ser ...
- 前后端数据交互(二)——原生 ajax 请求详解
一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件 其他 j ...
随机推荐
- Qt第三方库----QCustomPlot
一.软件下载 下载地址:http://www.qcustomplot.com/index.php/download 这里推荐下载第一个链接的内容: 注:这里的第三方库要放在非中文目录下. 二.配置 ( ...
- T3
T3构造图
- Android应用源码航空订票软件客户端
功能分类:其他 支持平台:Android 运行环境:Android 开发语言:Java 开发工具:Eclipse 源码大小:1.76MB 下载地址:http://w ...
- JMS学习十一(ActiveMQ Consumer高级特性之独有消费者(Exclusive Consumer))
一.简介 Queue中的消息是按照顺序被分发到consumers的.然而,当你有多个consumers同时从相同的queue中提取消息时, 你将失去这个保证.因为这些消息是被多个线程并发的处理.有的时 ...
- BZOJ 1069 Luogu P4166 最大土地面积 (凸包)
题目链接: (bzoj)https://www.lydsy.com/JudgeOnline/problem.php?id=1069 (luogu)https://www.luogu.org/probl ...
- 【转】博弈论——acm
转自http://blog.csdn.net/lgdblue/article/details/15809893 序:博弈是信息学和数学试题中常会出现的一种类型,算法灵活多变是其最大特点,而其中有一类试 ...
- legend3---阿里云如何多个域名指向同一个网站
legend3---阿里云如何多个域名指向同一个网站 一.总结 一句话总结: 先寻求资料及文档,没有找到的话自己摸索一下就好 结论:多个域名都需要备案 二.阿里云如何多个域名指向同一个网站 当前情况 ...
- 关于spotlight_on_oracle的配置及操作
Spotlight是一个强有力的Oracle数据库实时性能诊断工具,提供了一个直观的.可视化的数据库活动展现.Spotlight可视化展现性能瓶颈,一旦某个指标超出可接受的阀值的话.而且,通过下钻功能 ...
- leetcode-easy-array-48. Rotate Image-NO
mycode 思路:第m行要变到 - 1- m 列 ,但是没有再想一步即列变为行,这样每一个位置的变换方式就出来了 难点:如何不使用额外空间呢? 参考: 思路:找到矩阵旋转和转置之间的联系,转置是可以 ...
- Flask 中的蓝图
相当与django中的App 基础模板 1.初识Flask蓝图(blueprint) 创建一个项目然后将目录结构做成: s_view.py 文件中的内容 from flask import Blu ...