Ajax傳值以及接受傳值,@ResPonseBody 和 @RequestBody


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對象輸出指定格式的數據。

 


在做后提一下傳值為時間格式的時候,要引入標簽庫。
<%--將date類型,轉為字符串--%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

代碼要用fmt闊上。
<fmt:formatDate value="${user.birthday}" pattern="YYYY-MM-dd HH:mm:ss"></fmt:formatDate>
 
 

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com