js与后台的数据交互

最新推荐文章于 2023-07-18 19:26:42 发布

字符跳动

最新推荐文章于 2023-07-18 19:26:42 发布

阅读量2.4k

点赞数 1

分类专栏： JavaScript 文章标签： js ajax layui

本文链接：https://blog.csdn.net/weixin_46109017/article/details/119383106

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

盲点：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'}
        ]]
    });