sprig之使用ajax來實現向後臺實現json型別資料的傳遞
阿新 • • 發佈：2019-01-23
首先要說的是一定要引對jar包，不是單獨json型別的包，而是json包和spring的依賴jar包都要引入。這裡給一個maven地址，可以實現對所有的jar包都進行引入操作。（本人就是因為jar包沒引對而一直出現415錯誤，比較坑）
<!--進行json依賴的jar報--> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.2</version> </dependency>
接收下來是全部程式碼:web.xml就不顯示了。沒有什麼新新增的東西
spring配置檔案:
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd"> <mvc:annotation-driven></mvc:annotation-driven> <!--靜態資源解析器，用於實現對js程式碼進行直接訪問--> <mvc:resources location="/js/" mapping="/js/**"></mvc:resources> <mvc:annotation-driven></mvc:annotation-driven> <context:component-scan base-package="com.controller"></context:component-scan> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/view/"/> <property name="suffix" value=".jsp"></property> </bean> </beans>
後臺:
package com.controller; import java.util.List; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import com.model.UserInfo; @Controller @RequestMapping(value="loginController") public class LoginController { @ResponseBody @RequestMapping(value="method1") public String method1(@RequestBody String username) { System.out.println("訪問method1"); System.out.println(username); return username; } @ResponseBody @RequestMapping(value="method2") public UserInfo method2(@RequestBody UserInfo userinfo) { System.out.println("訪問method2"); System.out.println(userinfo); return userinfo; } @ResponseBody @RequestMapping("method3") public List<UserInfo> method3(@RequestBody List<UserInfo> userinfos) { System.out.println("userinfos="+userinfos); for (Object object : userinfos) { System.out.println(object); } return userinfos; } }
頁面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function sendAjax1()
{
/*建立一個js物件*/
var username='qingzhiyu';
/*將js物件轉變為json型別的字串資料物件*/
var username=JSON.stringify(username);
$.ajax
({
url:"loginController/method1",
type:"post",
/*進行json字串資料物件的提交*/
data:username,
contentType:"application/json",
success:function(data)
{
alert(data);
},
error:function()
{
alert("程式出錯");
}
});
}
/*實現json物件的提交*/
function sendAjax2()
{
/*將一個json字串物件傳遞到後臺之後解析為一個物件進行接收*/
$.ajax
({
url:"loginController/method2",
type:"post",
/*進行json字串資料物件的提交*/
data:'{"username":"qingzhiyu","password":"00000"}',
contentType:"application/json",
success:function(data)
{
alert(data);
},
error:function()
{
alert("程式出錯");
}
});
}
/*實現json陣列的提交*/
function sendAjax3()
{
/*實現以陣列物件的形式來實現向後臺當中進行json資料物件的傳值操作*/
var userInfo1={'username':'qingzhiyu1','password':'幷州1'};
var userInfo2={'username':'qingzhiyu2','password':'幷州2'};
var userInfo3={'username':'qingzhiyu3','password':'幷州3'};
var userInfos=[];//建立一個數組物件
userInfos.push(userInfo1);
userInfos.push(userInfo2);
userInfos.push(userInfo3);
/*將一個json字串物件傳遞到後臺之後解析為一個物件進行接收*/
var userInfosJson = JSON.stringify(userInfos);
$.ajax
({
url:"loginController/method3",
type:"post",
cache:false,
/*進行json字串資料物件的提交*/
data:userInfosJson,
contentType:"application/json;charset=utf-8",
success:function(data)
{
alert(data);
},
error:function()
{
alert("程式出錯");
}
});
}
</script>
</head>
<body>
<!--使用非同步端提交的方式來實現向後臺當中傳遞一個json字串物件，然後將對該json字串物件進行解析為一個json物件-->
<input type="button" onclick="sendAjax1()" value="button">
<input type="button" onclick="sendAjax2()" value="button">
<input type="button" onclick="sendAjax3()" value="button">
</body>
</html>