ajax異步傳值及后端接收參數(shù)的多種方式小結
異步傳值
第一種呢,也是最簡單的一種,通過get提交方式,將參數(shù)在鏈接中以問號的形式進行傳遞
// 前臺傳值方法
// 觸發(fā)該方法調(diào)用ajax
function testAjax(yourData) {
$.ajax({
type: "get", // 以get方式發(fā)起請求
url: "/yourUrl?yourDataName=" + yourData, // 將你的請求參數(shù)以問號拼接到url中進行參數(shù)傳遞
success(data) {
// data為返回值
// 成功后的回調(diào)方法
}
})
}// 后臺接值方法
@RequestMapping("/yourUrl")
@ResponseBody
// @RequestParam("yourData")是必不可少的,因為他指定了鏈接中的參數(shù)名稱
public String yourUrl(@RequestParam("yourData") String yourData) {
System.out.println(yourData);
// 返回值可以自由定義
return "SUCCESS";
}第二種呢,是將參數(shù)體現(xiàn)到鏈接中,在后臺通過占位進行傳遞。
// 前臺傳值方法,其實大體與上方相同只需注意url即可
// 觸發(fā)該方法調(diào)用ajax
function testAjax(yourData) {
$.ajax({
type: "get", // 以get方式發(fā)起請求
url: "/yourUrl/"+yourData, // 將你的請求參數(shù)拼接到url中進行參數(shù)傳遞
success(data) {
// data為返回值
// 成功后的回調(diào)方法
}
})
}// 后臺接值方法
@RequestMapping("/yourUrl/{yourDataName}")
@ResponseBody
// 同樣@PathVariable("yourDataName")必不可少,因為他指定鏈接中某個位置代表著名為yourDataName的變量
public String yourUrl(@PathVariable("yourDataName") String yourData) {
System.out.println(yourData);
// 返回值可以自由定義
return "SUCCESS";
}第三種呢,通過post提交方式將form表單中的數(shù)據(jù)序列化后傳遞到后臺
// 前臺傳值方法
function testAjax() {
$.ajax({
type: "post", // 以post方式發(fā)起請求
url: "/yourUrl", // 你的請求鏈接
data:$("#myForm").serialize(), // 對id為myForm的表單數(shù)據(jù)進行序列化并傳遞到后臺
success(data) {
// data為返回值
// 成功后的回調(diào)方法
}
})
} // 后臺接值方法
@RequestMapping("/yourUrl")
@ResponseBody
// 在這里我假設大家表單數(shù)據(jù)與User實體類相對應
public String yourUrl(User user) {
System.out.println(user.toString());
return "SUCCESS";
}第四種呢,就是Ajax異步傳值最常見的在ajax方法體中使用data進行傳值
// 前臺傳值方法
function testAjax() {
$.ajax({
type: "post", // 以post方式發(fā)起請求
url: "/yourUrl", // 你的請求鏈接
data: { // 提交數(shù)據(jù)
"username": "admin", // 前者為字段名,后者為數(shù)據(jù)
"password": "admin"
},
success(data) {
// data為返回值
// 成功后的回調(diào)方法
}
})
} // 后臺接值方法
@RequestMapping("/yourUrl")
@ResponseBody
// 在這里我假設大家表單數(shù)據(jù)與User實體類相對應
public String yourUrl(@RequestParam("username") String username, @RequestParam("password") String password) {
System.out.println("username="+username+";password="+password);
return "SUCCESS";
}后臺往前臺傳值就要簡單一些,單個數(shù)據(jù)或者封裝數(shù)據(jù)可以直接使用return返回json數(shù)據(jù)給前臺,如果是多個數(shù)據(jù),可以使用PrintWriter進行傳值,具體操作如下
PrintWriter out = response.getWriter();
try {
out.write("yourWillReturnData");
} catch (Exception e) {
e.printStackTrace();
}finally{
out.close();
}// 無論通過那種方式,只需在前臺Ajax得success回調(diào)方法中對數(shù)據(jù)進行處理即可,我們以user為例
success(user){
alert("返回的用戶名為:"+user.username+"!!!密碼為:"+user.password);
// 在瀏覽器控制臺打印結果,點擊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標簽拼接參數(shù) -->
<a href="/yourUrl?youDataName=yourData" rel="external nofollow" >問號傳遞參數(shù)</a>
<a href="/yourUrl/yourData" rel="external nofollow" >拼接鏈接傳遞參數(shù)</a>2.后臺接受參數(shù)方式不變,與異步方式完全相同。
// 1.可以通過session進行參數(shù)傳遞
@RequestMapping("/yourUrl")
public String yourUrl(HttpServletRequest request) {
// 通過request獲取session,然后向session中放入?yún)?shù)key-value
request.getSession().setAttribute("yourDataName", "yourData");
// 跳轉到你的視圖
return "/yourViews";
}
// 2.可以通過Model進行參數(shù)傳遞
@RequestMapping("/yourUrl")
public String yourUrl(Model model) {
// 向model中加入?yún)?shù)key-value
model.addAttribute("yourDataName", "yourData");
// 跳轉到你的視圖
return "/yourViews";
}
// 3.同樣可以用request進行參數(shù)傳遞
@RequestMapping("/yourUrl")
public String yourUrl(HttpServletRequest request) {
// 通過request放入?yún)?shù)key-value
request.setAttribute("yourDataName", "yourData");
// 跳轉到你的視圖
return "/yourViews";
}EL表達式怎么用?為什么EL表達式不起作用,頁面展示為${dataName}?
<!-- 我們在這里以c標簽的for循環(huán)為例做演示 -->
<!-- 首先導入c標簽 -->
<%@ 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>異步請求完成后如何進行跳轉?
1.首先要明確,如果你的視圖層全部放在WEB-INF中,那么你的視圖層是無法直接進行跳轉的,也就是說你不能由一個jsp跳轉到另一個jsp,html同理。springboot項目也是一樣,如果你是springboot項目,推薦使用thymeleaf模版引擎。
2.如果你希望在回調(diào)成功之后進行頁面跳轉,可以通過如下代碼實現(xiàn):
// 前臺代碼
success(user){
alert("返回的用戶名為:"+user.username+"!!!密碼為:"+user.password);
// 在瀏覽器控制臺打印結果,點擊f12可以查看
console.log("返回的用戶名為:"+user.username+"!!!密碼為:"+user.password);
// 成功回調(diào)后進行跳轉
window.location.href="/youWantToJumpUrl" rel="external nofollow" ;
} // 后臺代碼
@RequestMapping("/youWantToJumpUrl")
public String youWantToJumpUrl() {
// 跳轉到視圖層
return "/youWantToJumpView";
// 重定向 return "redirect:/youWantToJumpUrl";
}也就是說,如果想要跳轉頁面或者重定向到某一個方法,必須經(jīng)過一次控制層才能實現(xiàn)。



二、



參考鏈接 ajax異步傳值|前后臺傳值|EL表達式
到此這篇關于ajax異步傳值及后端接收參數(shù)的多種方式小結的文章就介紹到這了,更多相關ajax異步傳值接收參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
DELETE 請求如何通過ajax進行發(fā)送(方法小結)
DELETE 請求用于向服務器發(fā)送刪除資源的請求,它是 RESTful API 中的一個重要方法,用于刪除指定的資源,本文給大家介紹DELETE 請求如何通過ajax進行發(fā)送,感興趣的朋友一起看看吧2023-11-11
Ajax中responseText返回的是一個頁面而不是一個值
用response返回的內(nèi)容卻是一個頁面的,可以將String 類型改為void 這樣返回的就不是整個頁面了2014-05-05
SpringMVC+Jquery實現(xiàn)Ajax功能
SpringMVC:是基于Spring的一個子框架(MVC框架),功能強于Spring,這個框架主要是解決咱們Controller這一層的問題。這篇文章主要介紹了SpringMVC+Jquery實現(xiàn)Ajax功能,需要的朋友可以參考下2019-06-06
ajax異步處理POST表單中的數(shù)據(jù)示例代碼
這篇文章主要介紹了如何利用ajax異步處理POST表單中的數(shù)據(jù),下面有個不錯的示例,大家可以參考下2014-06-06
Ajax+php實現(xiàn)商品分類三級聯(lián)動
這篇文章主要介紹了Ajax+php實現(xiàn)商品分類三級聯(lián)動,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08
通過Ajax進行Post提交Json數(shù)據(jù)的方法
下面小編就為大家分享一篇通過Ajax進行Post提交Json數(shù)據(jù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03

