关于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异常