盲点：js与后台数据交互
最近在使用前端框架layui和springMVC，js知识基础差、mvc没探究清楚导致在前后端数据交互时出现语法错误、数据格式不匹配等问题，死磕三天三夜，成功不知为何，失败不知原因
相关异常：
1、 layui表格获得数据，却无法正常渲染到页面表格，报500错误
2、springMVC中前端ajax传数据后端controller报参数为null错误
$.ajax({
url: "add_Credititem_audit",
type: "POST",
//contentType: "application/json;charset=UTF-8",
data: {
"sid": sid,//指定学生
"chk_yes_value": chk_yes_value,
"chk_no_value": chk_no_value,
},
//dataType:'json',
success: function (res) {
layer.msg("提交成功");
setTimeout(function(){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);//关闭弹出层
parent.layui.table.reload("table_credit_audit",location);
}, 2100);
},
error: function(res){
layer.msg("提交失败");
console.log(res);
}
});
1. Ajax属性
-
url：请求访问地址
-
type：请求类型，两种分别是post和get，
基本区别：
（1）get方法将请求数据附在url后面，一来明文显示不安全，二来数据会被缓存也不安全，三来url有长度限制无法附带那么多数据，而且服务器端是使用Request.QueryString来获取参数，所以一般用于请求数据不多的查询搜索；
（2）post方法是将请求数据以实体类保存传输，一来安全，二来可附带很多数据，服务器端使用Request.Form来获取参数，一般用于请求数据很多的增删改操作； -
data：请求参数及参数值，数据格式有以下
（1）合法对象
var d2 = 'aaa',d4 = 'bbb',arr = [1,2,3];
data : {
"d1":"d1",//常规d1参数值是字符串"d1"
"d2": d2, //常规d1参数值是变量d2的值
d3 :'d3',//d3省略引号，JS中字符串用单引号或者双引号都是等价的
d4 : d4, //d4省略引号，值为变量d4的值
arr: arr,//传一个数组idArr
//arr2[]: arr2 //错误
"arr3[]":arr3//传一个数组idArr3，记得要[]
},
也可以写成
var object.d1 = "d1",
d2 = 'aaa',
object.d2 = d2,
object.d3 = "d3",
...
data : object,
（2）json数据格式（json字符串）
var object.d1 = "d1",
d2 = 'aaa',
object.d2 = d2,
object.d3 = "d3",
...
data : JSON.stringifg(object),//用这个方法转换一下
（3）查询字符串
data : {
"d1=d1",
"d2=d2",
"d3=d3"
},
参数传输时：...d1=d1&d2=aaa&d3=d3&d4=bbb&arr[0]=1&arr[1]=2&...
- contentType：意为内容的编码类型，可选。
（1）不写时，默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
它可以支持很多种情况，只要data是一个上面例子中的合法对象，都能将该对象自动地转化成查询字符串的形式发送到服务器。
但是，不能是上面例子中的json字符串，多此一举只会报错；
（2）写"application/json; charset=utf-8"时，转换成json字符串才不会报错，且必须转换。
-
dataType：预期服务器返回的数据类型。
（1）text：返回纯文本字符串；
（2）json：返回JSON数据；
（3）其他：xml：返回XML文档，可用JQuery处理；html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行；script：返回纯文本JavaScript代码。；jsonp：JSONP格式。 -
async：是否异步请求。默认为true，均为异步请求。如果需要同步请求，请设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待该请求完成才可以执行。
-
success：请求成功后调用的回调函数，有两个参数。
(1)data是根据dataType参数进行处理后的数据 (2)描述状态的字符串
function(data, textStatus){ } -
error：请求失败时被调用的函数。
function(XMLHttpRequest, textStatus, errorThrown){ } -
complete：成功或失败均调用。
function(XMLHttpRequest, textStatus){ }
2. js接收数据格式及其转换
发送数据上面基本讲了，
而接收数据，最近是用于layui表格渲染，layui对数据格式较严格，先瞧一下代码例子
table.render({
elem: '#table_majormanage'
,url:'find_major'
,Type: "GET"
,title: '专业管理数据表'
,parseData: function(res){
return {
"code": 0, //解析接口状态
"msg": 0, //解析提示文本
"data": res,//解析数据列表
"count":res.length
}
}
,cols: [[
{type: 'checkbox'}
,{field:'num', title:'序号', sort: true, align:'center', width:100, type:'numbers'}
,{field:'teacher', title:'专业负责人', align:'center',templet: function(res){
if (res['teacher']!=null){
console.log(res['teacher']['tname']);
return '<a href="javascript;" class="tnotname">'
+res['teacher']['tno']
+" "+res['teacher']['tname']+'</a>';
} else {
return "暂未绑定";
}
}
}
,{title:'操作', toolbar: '#barDemo', fixed: 'right', align:'center'}
]]
});
重点：parseData属性的转换
这是没加parseData属性的时候，报错
加了之后，成功渲染表格，这是官方文档解释
传回的数据不仅仅只有data，还有其他附加信息如code，msg，count，表格需要先获取这些信息
*参考：https://www.cnblogs.com/fanbi/p/7880440.html、*https://blog.csdn.net/qq_37960007/article/details/79542727