原文參考
異步傳值
前臺(tái)往后臺(tái)傳值呢圃伶，有很多種方式，大家聽我細(xì)細(xì)道來蒲列。
第一種呢窒朋，也是最簡(jiǎn)單的一種，通過get提交方式蝗岖，將參數(shù)在鏈接中以問號(hào)的形式進(jìn)行傳遞侥猩。
// 前臺(tái)傳值方法
// 觸發(fā)該方法調(diào)用ajax
function testAjax(yourData) {
$.ajax({
type: "get", // 以get方式發(fā)起請(qǐng)求
url: "/yourUrl?yourDataName=" + yourData, // 將你的請(qǐng)求參數(shù)以問號(hào)拼接到url中進(jìn)行參數(shù)傳遞
success(data) {
// data為返回值
// 成功后的回調(diào)方法
}
})
}
// 后臺(tái)接值方法
@RequestMapping("/yourUrl")
@ResponseBody
// @RequestParam("yourData")是必不可少的，因?yàn)樗付随溄又械膮?shù)名稱
public String yourUrl(@RequestParam("yourData") String yourData) {
System.out.println(yourData);
// 返回值可以自由定義
return "SUCCESS";
}
第二種呢剪侮，是將參數(shù)體現(xiàn)到鏈接中拭宁，在后臺(tái)通過占位進(jìn)行傳遞。
// 前臺(tái)傳值方法瓣俯，其實(shí)大體與上方相同只需注意url即可
// 觸發(fā)該方法調(diào)用ajax
function testAjax(yourData) {
$.ajax({
type: "get", // 以get方式發(fā)起請(qǐng)求
url: "/yourUrl/"+yourData, // 將你的請(qǐng)求參數(shù)拼接到url中進(jìn)行參數(shù)傳遞
success(data) {
// data為返回值
// 成功后的回調(diào)方法
}
})
}
// 后臺(tái)接值方法
@RequestMapping("/yourUrl/{yourDataName}")
@ResponseBody
// 同樣@PathVariable("yourDataName")必不可少杰标，因?yàn)樗付ㄦ溄又心硞€(gè)位置代表著名為yourDataName的變量
public String yourUrl(@PathVariable("yourDataName") String yourData) {
System.out.println(yourData);
// 返回值可以自由定義
return "SUCCESS";
}
第三種呢，通過post提交方式將form表單中的數(shù)據(jù)序列化后傳遞到后臺(tái)彩匕。
// 前臺(tái)傳值方法
function testAjax() {
$.ajax({
type: "post", // 以post方式發(fā)起請(qǐng)求
url: "/yourUrl", // 你的請(qǐng)求鏈接
data:$("#myForm").serialize(), // 對(duì)id為myForm的表單數(shù)據(jù)進(jìn)行序列化并傳遞到后臺(tái)
success(data) {
// data為返回值
// 成功后的回調(diào)方法
}
})
}
// 后臺(tái)接值方法
@RequestMapping("/yourUrl")
@ResponseBody
// 在這里我假設(shè)大家表單數(shù)據(jù)與User實(shí)體類相對(duì)應(yīng)
public String yourUrl(User user) {
System.out.println(user.toString());
return "SUCCESS";
}
第四種呢腔剂，就是Ajax異步傳值最常見 的在ajax方法體中使用data進(jìn)行傳值。
// 前臺(tái)傳值方法
function testAjax() {
$.ajax({
type: "post", // 以post方式發(fā)起請(qǐng)求
url: "/yourUrl", // 你的請(qǐng)求鏈接
data: { // 提交數(shù)據(jù)
"username": "admin", // 前者為字段名驼仪，后者為數(shù)據(jù)
"password": "admin"
},
success(data) {
// data為返回值
// 成功后的回調(diào)方法
}
})
}
@RequestMapping("/yourUrl")
@ResponseBody
// 在這里我假設(shè)大家表單數(shù)據(jù)與User實(shí)體類相對(duì)應(yīng)
public String yourUrl(@RequestParam("username") String username, @RequestParam("password") String password) {
System.out.println("username="+username+";password="+password);
return "SUCCESS";
}
后臺(tái)往前臺(tái)傳值就要簡(jiǎn)單一些掸犬，單個(gè)數(shù)據(jù)或者封裝數(shù)據(jù)可以直接使用return返回json數(shù)據(jù)給前臺(tái)，如果是多個(gè)數(shù)據(jù)绪爸，可以使用```
PrintWriter進(jìn)行傳值湾碎，具體操作如下
PrintWriter out = response.getWriter();
try {
out.write("yourWillReturnData");
} catch (Exception e) {
e.printStackTrace();
}finally{
out.close();
}
// 無論通過那種方式，只需在前臺(tái)Ajax得success回調(diào)方法中對(duì)數(shù)據(jù)進(jìn)行處理即可,我們以u(píng)ser為例
success(user){
alert("返回的用戶名為:"+user.username+"!!!密碼為:"+user.password);
// 在瀏覽器控制臺(tái)打印結(jié)果奠货，點(diǎn)擊f12可以查看
console.log("返回的用戶名為:"+user.username+"!!!密碼為:"+user.password);
}
非異步方式傳值
非異步方式前臺(tái)傳遞參數(shù)
1.與異步方式類似介褥，使用form直接提交或者在鏈接中拼接參數(shù)即可。
<!-- form表單提交 -->
<form id="myForm" class="layui-form" action="/yourUrl" method="post">
<input type="text" name="username" required placeholder="郵箱"/>
<input type="password" name="username" required placeholder="密碼"/>
<button type="submit" class="layui-btn">登錄</button>
</form>
<!-- a標(biāo)簽拼接參數(shù) -->
<a href="/yourUrl?youDataName=yourData">問號(hào)傳遞參數(shù)</a>
<a href="/yourUrl/yourData">拼接鏈接傳遞參數(shù)</a>
2.后臺(tái)接受參數(shù)方式不變，與異步方式完全相同柔滔。
非異步方式后臺(tái)向前臺(tái)傳遞數(shù)據(jù)
// 1.可以通過session進(jìn)行參數(shù)傳遞
@RequestMapping("/yourUrl")
public String yourUrl(HttpServletRequest request) {
// 通過request獲取session溢陪，然后向session中放入?yún)?shù)key-value
request.getSession().setAttribute("yourDataName", "yourData");
// 跳轉(zhuǎn)到你的視圖
return "/yourViews";
}
// 2.可以通過Model進(jìn)行參數(shù)傳遞
@RequestMapping("/yourUrl")
public String yourUrl(Model model) {
// 向model中加入?yún)?shù)key-value
model.addAttribute("yourDataName", "yourData");
// 跳轉(zhuǎn)到你的視圖
return "/yourViews";
}
// 3.同樣可以用request進(jìn)行參數(shù)傳遞
@RequestMapping("/yourUrl")
public String yourUrl(HttpServletRequest request) {
// 通過request放入?yún)?shù)key-value
request.setAttribute("yourDataName", "yourData");
// 跳轉(zhuǎn)到你的視圖
return "/yourViews";
}
