ajax異步傳值及后端接收參數(shù)的多種方式小結(jié)
異步傳值
第一種呢,也是最簡(jiǎn)單的一種,通過(guò)get提交方式,將參數(shù)在鏈接中以問(wèn)號(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ù)以問(wèn)號(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)通過(guò)占位進(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";
}第三種呢,通過(guò)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異步傳值最常見(jiàn)的在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)方法
}
})
} // 后臺(tái)接值方法
@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();
}// 無(wú)論通過(guò)那種方式,只需在前臺(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);
}非異步方式傳值
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" rel="external nofollow" >問(wèn)號(hào)傳遞參數(shù)</a>
<a href="/yourUrl/yourData" rel="external nofollow" >拼接鏈接傳遞參數(shù)</a>2.后臺(tái)接受參數(shù)方式不變,與異步方式完全相同。
// 1.可以通過(guò)session進(jìn)行參數(shù)傳遞
@RequestMapping("/yourUrl")
public String yourUrl(HttpServletRequest request) {
// 通過(guò)request獲取session,然后向session中放入?yún)?shù)key-value
request.getSession().setAttribute("yourDataName", "yourData");
// 跳轉(zhuǎn)到你的視圖
return "/yourViews";
}
// 2.可以通過(guò)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) {
// 通過(guò)request放入?yún)?shù)key-value
request.setAttribute("yourDataName", "yourData");
// 跳轉(zhuǎn)到你的視圖
return "/yourViews";
}EL表達(dá)式怎么用?為什么EL表達(dá)式不起作用,頁(yè)面展示為${dataName}?
<!-- 我們?cè)谶@里以c標(biāo)簽的for循環(huán)為例做演示 -->
<!-- 首先導(dǎo)入c標(biāo)簽 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 編寫foreach循環(huán)-->
<c:forEach items="${userList}" var="user">
<input type="text" name="username" value="${user.username}"/>
<input type="text" name="password" value="${user.password}"/>
</c:forEach>異步請(qǐng)求完成后如何進(jìn)行跳轉(zhuǎn)?
1.首先要明確,如果你的視圖層全部放在WEB-INF中,那么你的視圖層是無(wú)法直接進(jìn)行跳轉(zhuǎn)的,也就是說(shuō)你不能由一個(gè)jsp跳轉(zhuǎn)到另一個(gè)jsp,html同理。springboot項(xiàng)目也是一樣,如果你是springboot項(xiàng)目,推薦使用thymeleaf模版引擎。
2.如果你希望在回調(diào)成功之后進(jìn)行頁(yè)面跳轉(zhuǎn),可以通過(guò)如下代碼實(shí)現(xiàn):
// 前臺(tái)代碼
success(user){
alert("返回的用戶名為:"+user.username+"!!!密碼為:"+user.password);
// 在瀏覽器控制臺(tái)打印結(jié)果,點(diǎn)擊f12可以查看
console.log("返回的用戶名為:"+user.username+"!!!密碼為:"+user.password);
// 成功回調(diào)后進(jìn)行跳轉(zhuǎn)
window.location.href="/youWantToJumpUrl" rel="external nofollow" ;
} // 后臺(tái)代碼
@RequestMapping("/youWantToJumpUrl")
public String youWantToJumpUrl() {
// 跳轉(zhuǎn)到視圖層
return "/youWantToJumpView";
// 重定向 return "redirect:/youWantToJumpUrl";
}也就是說(shuō),如果想要跳轉(zhuǎn)頁(yè)面或者重定向到某一個(gè)方法,必須經(jīng)過(guò)一次控制層才能實(shí)現(xiàn)。



二、



參考鏈接 ajax異步傳值|前后臺(tái)傳值|EL表達(dá)式
到此這篇關(guān)于ajax異步傳值及后端接收參數(shù)的多種方式小結(jié)的文章就介紹到這了,更多相關(guān)ajax異步傳值接收參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JQuery+ajax實(shí)現(xiàn)批量上傳圖片(自寫)
jquery+ajax方式實(shí)現(xiàn)單張圖片上傳的代碼是可以搜的到,實(shí)現(xiàn)批量上傳圖片的程序卻沒(méi)搜索到于是自己寫了個(gè),感興趣的朋友可以參考下2013-04-04
AJAX實(shí)現(xiàn)文件上傳功能報(bào)錯(cuò)Current request is not a&n
Ajax動(dòng)態(tài)為下拉列表添加數(shù)據(jù)的實(shí)現(xiàn)方法
ajax實(shí)現(xiàn)點(diǎn)擊不同的鏈接讓返回的內(nèi)容顯示在特定div里

