首先要明白幾個概念
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