首先要明白几个概念
JavaScript(简称JS)，是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
jQuery是一个快速、简洁的JavaScript框架，封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
一、JavaScript对象
JavaScript 中的所有事物都是对象，且允许自定义对象。
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。
- 布尔型可以是一个对象。
- 数字型可以是一个对象。
- 字符串也可以是一个对象
- 日期是一个对象
- 数学和正则表达式也是对象
- 数组是一个对象
- 甚至函数也可以是对象
（1）创建JavaScript对象
创建一个对象，并不需要事先声明一个student类，直接new一个object类并往里面添加属性,或者先定义一个类型，然后再使用
在方法里访问属性时，不能省略 this ！！！
（2）访问对象
我们通常认为 "JavaScript 对象是键值对的容器"。键值对通常写法为 name : value (键与值以冒号分割)。
两种方式：.name 或者 ["name"]
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
二、JSON对象、JSON字符串、JS对象
(1)联系与区别
- JSON: JavaScript Object Notation（JavaScript 对象标记法）。
- JSON 使用 JavaScript 语法，是JavaScript 语法的子集，但是 JSON 格式是纯文本的。
- JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
- JSON字符串，一个用单引号或者双引号引起来的字符串，因为字符串的格式符合json的格式，所以叫做json字符串。通过typeof()查看，类型为string
var b='{"name":"2323","sex":"afasdf","age":"6262"}'; //json字符串
var person={"name":"tom","sex":"男","age":"24"} //json对象
var car = {type:"Fiat", model:500, color:"white"}; //JS对象
（2）相互转换
1、json字符串和json对象的转换 JSON.parse
var str = "{"one":"Good","two":"Man","four":[1,2]}"
var strObject = JSON.parse(str);
2、json对象转为json字符串 JSON.stringify()
var a={"name":"tom","sex":"男","age":"24"}
var aToString=JSON.stringify(a);
三、前后端应用
说了这么多的目的就是为了前后端交互应用；前端ajax提交，springMVC接收或者web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
1、读取
（1）如果后台返回的是json对象，什么操作都不需要，直接使用data即可
（2）如果data是字符串，使用eval("("+data+")")可以将其转换为json对象
（3）如果data是字符串，实现转化用JSON.parse更好
(4) 如果data是字符串, 也可以使用jQuery.parseJSON(a); // $.parseJSON(a);
(JSON.parse()是js方法，jQuery.parseJSON()是jquery方法。有的浏览器不支持JSON.parse()方法，使用jQuery.parseJSON()方法时，在浏览器支持时会返回执行JSON.parse()方法的结果，否则会返回类似执行eval()方法的结果)
eval("("+data+")") 原因在于：eval本身的问题。 由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语 句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始 和结束标记，那么{}将会被认为是执行了一句空语句。
Controller返回Json类型的数据需要加@ResponseBody注解
2、后端接收
- 类型：布尔值或字符串
- 默认：
'application/x-www-form-urlencoded; charset=UTF-8'name/value 成为一组，每组之间用 & 联接，而 name与value 则是使用 = 连接 如www.baidu.com/q?key=fdsa&lang=zh - multipart/form-data application/json text/xml
- 类型：字符串
- 默认值：
Intelligent Guess (xml, json, script, or html)
GET、POST方式提时， 根据request header Content-Type的值来判断:
1、application/x-www-form-urlencoded，@RequestParam, @ModelAttribute，@RequestBody能处理）；
2、multipart/form-data, 不能处理；
3、其他格式，必须使用@RequestBody来处理；
（1）、使用Ajax默认格式来传递数据
//当Ajax以默认格式上传时，data数据直接使用JSON对象user，不用转换为JSON字符串（很方便）
var user= {
"username" : username,
"password" : password,
"rememberMe":rememberMe
};
或者
var user= {
username : username,
password : password,
rememberMe:rememberMe
};
或者（key/value传值）
var user ="name="+name+"&age="+age+"&sex="+sex+"&address="+address；
$.ajax({
url : "http://...../jsontest.do",
type : "POST",
async : true,
data : user,
dataType : 'json',
success : function(data) {
}
});
————————————————
后端使用@RequestParam注解或省略：如果没有添加@RequestParam，函数的参数名称必须和ajax中的参数名称一致
//直接省略注解
@RequestMapping("/jsontest.do")
public void test(User user,String username,String password,Boolean rememberMe){
System.out.println(user);
System.out.println("username: " + username);
System.out.println("password: " + password);
System.out.println("rememberMe: " + rememberMe);
}
优点：
1.前端传递数据不用转换为json字符串
2.后端接受的参数很灵活，即可以封装为User对象（ajax中的参数名称与实体bean中名称一致）
亦可以使用单个参数username,rememberMe，甚至User对象和单个rememberMe参数混合使用都可以
（2）、使用application/json格式来传递数据，传的是json字符串
var user= {
"username" : username,
"password" : password
};
$.ajax({
url : "http://...../jsontest.do",
type : "POST",
async : true,
contentType: "application/json; charset=utf-8",
data : JSON.stringify(user),
dataType : 'json',
success : function(data) {
}
});
————————————————
后端必须使用@RequestBody 注解
//这种方式下所有的参数都只能封装在User对象中，不能单独设置参数
@RequestMapping("/jsontest")
public void test(@RequestBody User user ){
String username = user.getUsername();
String password = user.getPassword();
}
或者
@RequestMapping("/jsontest")
public void test(@RequestBody Map map ){
String username = map.get("username").toString();
String password = map.get("password").toString();
}
或者
public void test(@RequestBody String jsonData) {
JSONObject jsonObject = JSON.parseObject(jsonData);
String username= jsonObject.getString("username");
String username= jsonObject.getString("password");
}
拓展：
Controller返回值
Controller接收值常用的就两种,一种是springmvc的参数绑定,另一种为JavaBean类型接收
- 方式一:map集合返回
- 注意:复选框hobby值的形式取决于userbean中的hobby类型,String类型时传过来的值是逗号隔开的
@RequestMapping("/toServer.do") @ResponseBody public Map<String,String> sendString(User user){ //user是与页面参数对应的JavaBean //map集合用来存放返回值 Map<String,String> map = new HashMap<String, String>(); if(user != null) { map.put("result","提交成功"); }else { map.put("result","提交失败"); } return map; }
- 注意:复选框hobby值的形式取决于userbean中的hobby类型,String类型时传过来的值是逗号隔开的
-
方式二:Pojo返回
-
先定义一个用于返回数据的Pojo
public class Msg { private int code; //返回100表示成功,200表示失败 private String msg; //返回提示信息 private Map<String,Object> extend = new HashMap<String,Object>(); //用户返回给浏览器的数据 public static Msg success() { Msg result = new Msg(); result.setCode(100); result.setMsg("处理成功"); return result; } public static Msg fail() { Msg result = new Msg(); result.setCode(200); result.setMsg("处理失败"); return result; } public Msg add(String key,Object value) { this.getExtend().put(key, value); return this; } //get&set方法 -
Controller
@RequestMapping("/toServer.do") @ResponseBody public Msg sendString(User user){ System.out.println(user.toString()); if(user != null) { return Msg.success(); }else { return Msg.fail(); } } // ajax的success:function(data),data的返回值为{"code":100,"result":"成功"} /*此pojo可以使用return Msg.success.add("user",user)的方式向ajax返回实体对象 {"code":100,"msg":"处理成功","extend":{"user":{"name":"kasi","age":24,"sex":"m","hobby":null,"address":"中国"}}} */
-
参考链接：
原文链接：https://blog.csdn.net/qq_27008807/article/details/78882876
原文链接：https://blog.csdn.net/qianyiyiding/article/details/51615961
272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
