Ajax傳值以及接受傳值，@ResPonseBody 和 @RequestBody
阿新 • • 發佈：2018-11-16
Ajax對於Java程式設計人員開說可是很重要的，可以說是必會的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--第一步：引入Jquery的地址(相當於下載js原始碼，跟引入jar包一樣)-->
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<script>
// 第二步：使用Jquery的 ajax （被封裝過的）來請求資料地址
$.ajax({
type:'post',
url:'api/data.json',
data:{},
success:function (res) {
console.log(res)
}
})
// url: 填寫的內容的是 後臺的資料介面
// type: 本次傳送請求的方式 get/post
// data: 後臺需要前端傳送請求的引數，在這裡用JSON格式拼接
// success: 是ajax請求成功時，觸發的函式方法 res就是接受到的後臺返回的資料
// 第三步，在success接受後臺返回的資料內容
// 跨域問題：
$.ajax({
url:'http://lidongxu.top/Ldx/Ajax_Class/zhejsonp.php',
type:'get',
data:{},
dataType:'jsonp', // JQ已經封裝好了跨域請求，只需要在這加一行程式碼，前段就可以進行跨域請求，但是需要後端的支援
success:function (res) {
console.log(res)
}
})
</script>
</body>
</html>
看完上面的步驟，以及考慮到跨域問題。相信大家對ajax都有一些瞭解。
下面我們進行很親民化 的程式碼。
<%--
Created by IntelliJ IDEA.
User: mac
Date: 2018/10/26
Time: 1:57 PM
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script> 這裡也是引入JQ，方式有很多～
<html>
<head>
<title>Title</title>
</head>
<body>
<form action="${pageContext.request.contextPath}/user/ajax.do">
id<input type="text" name="id" id="userId">
姓名<input type="text" name="name" id="username">
<%--<input type="button" value="提交" id="btn" onclick="btnAction()"> --%>
<input type="button" value="提交" onclick="btnAction()">
</form>
</body>
</html>
<script>
// ajax的url傳值形式為{"id":1,"username":"張三",}
function btnAction(){
var id = $('#userId').val();
var username = $('#username').val();
var d ={"id":id,"username":username};
// 將物件型別轉成字串
var jsnStr = JSON.stringify(d);
$.ajax({
type:'post',
url:'${pageContext.request.contextPath}/user/ajaxTest.do',
contentType:'application/json;charset=utf-8', 這句話的作用也是很大的啊，可以把值拼在url上
data:jsnStr,
success:function (data) {
alert(data.username);
if(data.username=="小明"){
alert("成功")
}
}
})
};
接下來我們看一下後臺是如何把值傳回給ajax，以及接受ajax穿的值。
@ResPonseBody 和 @RequestBody 對於ajax接受值和傳值可以很好的兩個註解。
既然說到這兩個註解，我們就來看看這兩個註解的好處把。
@ResPonseBody
1、@RequestBody需要把所有請求引數作為json解析，因此，不能包含key=value這樣的寫法在請求url中，所有的請求引數都是一個json
2、直接通過瀏覽器輸入url時，@RequestBody獲取不到json物件，需要用java程式設計或者基於ajax的方法請求，將Content-Type設定為application/json
@RequestBody
1、@responseBody註解的作用是將controller的方法返回的物件通過適當的轉換器轉換為指定的格式之後，寫入到response物件的body區，通常用來返回JSON資料或者是XML
2、資料，需要注意的呢，在使用此註解之後不會再走檢視處理器，而是直接將資料寫入到輸入流中，他的效果等同於通過response物件輸出指定格式的資料。