之前跟着視頻學習時候就瞭解到,ajax是可以不刷新整個頁面情況下,進行數據交換和更新。學習完後,爲了加深理解,特地重新研究了下ajax和JSON之間的交互。
注意,要使用ajax,需要先引用jquery!
1.1、在pom引入json和jackson的jar包
<!--json-->
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>
<!-- jackson -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.8.1</version>
</dependency>
這樣,引入後就可以直接使用@ResponseBody
來註解方法,並封裝JSON
1.2 前端發送ajax請求
代碼如下(test.jsp,目錄在webapp下)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
用戶名:<input type="text" name="name"><br>
密碼:<input type="text" name="pw"><br>
<input type="button" id="b1" value="提交"><br>
</body>
<script>
$(function () {
$("#b1").click(function () {
$.ajax({
url: "/zyf/test", //後臺url
data: { //數據
name:$("input[name='name']").val(),
pw:$("input[name='pw']").val()
},
type: "POST", //類型,POST或者GET
dataType: 'json', //數據返回類型,可以是xml、json等
success: function (data) { //成功,回調函數
alert(data.result);
},
error: function (er) { //失敗,回調函數
alert(er);
}
});
})
})
</script>
</html>
ajax解釋說明:
a)我們設置的方法爲,只要點擊“id=b1”的按鈕,就會觸發這個函數
b)注意引用jquery!
c)ajax要發送好幾個數據。
- url:發送的請求地址(類似於action),後臺controller用@RequestMapping的value屬性接受請求
- type:請求方式(如post,get,delete等),controller的method屬性與之對應一樣
- dataType:數據返回的類型,可以是xml,json等,我們這裏聲明清楚是json類型。
- data:要傳進去的數據,格式爲
key:value
,controller裏可以在方法的參數裏,使用@RequestParam("value")
來獲取這個數 - success:成功返回數據後要執行的操作,此處我們是彈出結果。裏面的data(自定義名字,你取名aaa都行)即對應着controller裏的
return XXX
的XXX 。(後面再詳講)
1.3 controller寫法
代碼如下(TestController.java)
package com.atguigu.LearnTest.controller;
import net.sf.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class TestController {
@RequestMapping(value = "/zyf/test", method = RequestMethod.POST)
@ResponseBody
public JSONObject CeShi(@RequestParam("pw") String pw, @RequestParam("name") String name) {
JSONObject jsonObject = new JSONObject();
if ("".equals(pw) && "".equals(name))
jsonObject.put("result", "用戶名和密碼都爲空!");
else if ("".equals(name))
jsonObject.put("result", "用戶名爲空!");
else if ("".equals(pw))
jsonObject.put("result", "密碼爲空!");
else
jsonObject.put("result", name);
return jsonObject;
}
}
解釋說明:
- 該方法使用了兩個註解,這裏我們只簡介下@ResponseBody:它可以自動將該函數的返回的數據封裝成json模式,然後傳給前端內容(就目前階段而說,想要用json的話,直接在方法上添加@ResponseBody總是沒錯的)
- 這裏使用了JSONObject類型。其實簡單來說,這個就是個特殊的“Map”。不同的是,JSONObject的鍵值寫法爲
key:value
、map中是key=value
。所以這裏不用糾結很多,把它當Map看就好了 - @RequestParam將獲取到的值傳遞給參數
- jsonObject.put即添加 鍵值對
- 返回JSONObject,即對應着ajax的data。然後返回看jsp部分,就可以知道,我們將要alert彈出data.name(即jsonObject.name) -
1.4、運行及效果圖
1.5 Controller其他寫法
controller的類型不僅僅限制於Map JSONObject這些。還可以是String等等,比如我做如下修改,將JSONObject改爲String類型,然後直接返回一個String類型的ce
@RequestMapping(value = "/zyf/test", method = RequestMethod.POST)
@ResponseBody
public String CeShi(@RequestParam("pw") String pw, @RequestParam("name") String name) {
String ce="123456";
return ce;
}
前端的ajax把success的部分修改下:
...前面內容略
success: function (data) { //成功,回調函數
alert(data);
},
...後面內容略
就會彈出如下效果:(這也正好驗證了,data參數(隨便取名)對應着controller中return的對象(即,data=ce))