关于ajax前后台传值的问题

  1. ajax请求返回数据处理
    1.1 无参
    1.2 有参
  2. JSON.parse()、JSON.stringify()和 eval()函数
    (1)JSON.parse()函数
    (2)JSON.stringify()函数
    (3)eval()函数
    (4)JSON.parse(jsonString)和eval(jsonString)区别

1. ajax请求返回数据处理

1.1 无参

情况1:js代码

function getData() {
    $.ajax({
        url:'data/getStr',
        success:function(result){
               alert(result); //弹窗内容:true
        }
    })
}

Controller代码:

@RequestMapping(value = "/data/getStr" ,produces = "text/html;charset=UTF-8")
@ResponseBody
public String getStr(){
    return "true";
}

情况2:js代码

function getData1() {
    $.ajax({
        url:'data/getStr1',
        success:function(result){
                var user = eval("("+result+")");
                alert(user.name); //弹窗内容:小明
        }
    })
}

Controller代码:

@RequestMapping(value= "/data/getStr1",produces = "text/html;charset=UTF-8")
@ResponseBody
public String getStr1(){
    return "{\"name\":\"小明\",\"sex\":\"男\",\"address\":\"北京\",\"job\":\"web前端工程师\"}";
}

情况3:js代码

function getData2() {
    $.ajax({
        url:'data/getMap',
        success:function(result){
                alert(result.data[0].id);//弹窗内容:1001
        }
    })
}

Controller代码:

@RequestMapping("/data/getMap")
@ResponseBody
public Map<String,List<Student>>  getMap(){
    List<Student> list =new ArrayList<>();
    Student stu1 = new Student();
    stu1.setId("1001");
    stu1.setName("小明");
    stu1.setLoc("北京");
    list.add(stu1);
    Map<String,List<Student>> map = new HashMap<>();
    map.put("data",list);
    return map;
}

情况4:js代码

function getData3() {
    $.ajax({
        url:'data/getList',
        success:function(result){
             alert(result[0].name);//弹出内容:小明
        }
    })
}

Controller代码:

@RequestMapping("/data/getList")
@ResponseBody
public List<Student> getInfo(){
    List<Student> list =new ArrayList<>();
    Student stu1 = new Student();
    stu1.setId("1001");
    stu1.setName("小明");
    stu1.setLoc("北京");
    list.add(stu1);
    return list;
}
1.2 有参

情况1:js代码

function requestParam(){
    $.ajax({
        type: "POST", //请求的方式,默认get请求
        url: "testParam", //请求地址,后台提供的
        data: {name:'root',id:1001},//data是传给后台的字段,后台需要哪些就传入哪些
        dataType: "json", //json格式,如果后台返回的数据为json格式的数据,那么前台会收到Object
        success: function(result){
            if(result==true){
                alert("boolean:"+result);
            }else{
                alert("字符串"+result)
            }
        }
    })
}

Controller代码:

@RequestMapping(value = "/testParam")
@ResponseBody
public String testParam(String name,Integer id){
    System.out.println("name:"+name+",id:"+id);//控制台输出:name:root,id:1001
    return "true";
}

情况2:js代码

function requestParam1(){
    var data ={id:'1001',name:'测试'};
    $.ajax({
        type: "POST", //请求的方式,默认get请求
        url: "testParam1", //请求地址,后台提供的
        data:JSON.stringify(data),
        contentType: 'application/json',//如果添加contentType那么传到后台的就必须是json字符串
        dataType: "json", //json格式,如果后台返回的数据为json格式的数据,那么前台会收到Object。
        success: function(result){
            if(result==true){
                alert("boolean:"+result);
            }else{
                alert("字符串"+result)
            }
        }
    })
}

Controller代码:

@RequestMapping(value = "/testParam1")
@ResponseBody
public String testParam1(@RequestBody Student student){
 //也可使用@RequestBody Map<String,String> params接收参数
    System.out.println(student);//控制台输出:Student{id='1001', name='测试', age=0, phone='null', loc='null'}
    return "true";
}
Ajax请求dataType属性:dataType: "json", 如果后台返回的是json格式的字符串如: "{\"name\":\"小明\",\"sex\":\"男\",\"address\":\"北京\",\"job\":\"web前端工程师\"}" 那么前台接收到的就会是Object {name:"小明",sex:"男",address:"北京",job:"web前端工程师"} 也就不需要转化成js对象就可直接取值了。但是如果后台返回的不是json格式的字符串那么前台就会解析不了,如果想获取数据将json换成text或者不使用dataType属性就行了。

2. JSON.parse()、JSON.stringify()和 eval()函数

(1)JSON.parse()函数
作用:将json字符串转换成json对象。
语法:JSON. parse(text[,reviver]).
参数:text 必须;一个有效的json字符串。
reviver 可选。
返回值:一个对象或数组。
例1

var jsonStr='{"id":1001,"name":"张三"}';//可以转换
// var jsonStr="{'id':1001,'name':'张三'}"; //这种会报错
var user = JSON.parse(jsonStr);
console.log(user.name); //输出:张三

(2)JSON.stringify()函数
作用:将json对象转换成json字符串
语法:JSON.stringify(value [, replacer] [, space])
参数:value 必须;通常为对象或数组。
replacer 可选,用于转换结果的函数或者数组。
space 可选。向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。
返回值:一个包含JSON文本的字符串。
例2

var jsonStr={id:1001,name:'张三'};
var str = JSON.stringify(jsonStr);
console.log(str); //输出:{"id":1001,"name":"张三"}

(3) eval()函数
作用:eval()函数可计算某个字符串,并执行其中的javascript表达式或要执行的语句。
语法:eval(string)
参数: string 必须,需要计算的字符串,其中含有要计算的javascript表达式或要执行的语句。
返回值:返回计算string的值,没有的话不做任何改变返回。
例3

 //var jsonStr="{'id':1001,'name':'张三'}";//可以转换 
var jsonStr='{"id":1001,"name":"张三"}';//可以转换 
var user = eval("("+jsonStr+")");
console.log(user.id);

使用eval()函数也可以将JSON字符串解析为对象,这个功能能完成JSON.parse()的功能,但是有不一样的地方。不知道大家有没有注意到eval()还要用一对圆括号将字符串包起来,对此我寻找到比较好的解释就是:
原因:归结于eval本身的问题,由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。
解决方法:加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句。

(4)JSON.parse(jsonString)和eval(jsonString)区别:

安全性:JSON.parse()可以解析json格式的数据,并且会对要解析的字符串进行格式检查,如果格式不正确则不进行解析,而eval()则可以解析任何字符串,eval是不安全的。
格式严格性:JSON.parse()解析的必须是json格式的字符串要不报错,而eval()则没有这么严格,在这里“json格式的字符串”是指要求指定的字符串必须符合严格的JSON格式,例如:属性名称必须加双引号、字符串值也必须用双引号。如果传入一个格式不"完好"的JSON字符串将抛出一个JS异常

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值