1.pom.xml
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.51</version>
</dependency>
2.SpringMVC.xml添加代碼
<!-- <mvc:annotation-driven />-->
<mvc:annotation-driven >
<mvc:message-converters register-defaults="true">
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="supportedMediaTypes" value="text/plain;charset=UTF-8" />
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
<mvc:default-servlet-handler />
3.添加頁面
getMany.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用AJAX以JSON方式獲取數據</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<input type="button" value="通過AJAX獲取多個Hero對象111" id="sender">
<div id="messageDiv"></div>
<script>
$('#sender').click(function(){
var url="getManyCategory";
$.post(
url,
function(data) {
console.log(data);
var categorys = $.parseJSON(data);
console.log(categorys.length);
for(i in categorys){
var old = $("#messageDiv").html();
var category = categorys[i];
$("#messageDiv").html(old + "<br>"+category.id+" ----- "+category.name);
}
});
});
</script>
</body>
</body>
</html>
getOne.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用AJAX以JSON方式獲取數據</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<input type="button" value="通過AJAX獲取一個Hero對象---" id="sender">
<div id="messageDiv"></div>
<script>
$('#sender').click(function(){
var url="getOneCategory";
$.post(
url,
function(data) {
var json=JSON.parse(data);
var name =json.category.name;
var id = json.category.id;
$("#messageDiv").html("分類id："+ id + "<br>分類名稱:" +name );
});
});
</script>
</body>
</body>
</html>
submit.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用AJAX以JSON方式提交數據</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<form >
id：<input type="text" id="id" value="123" /><br/>
名稱：<input type="text" id="name" value="category xxx"/><br/>
<input type="button" value="提交" id="sender">
</form>
<div id="messageDiv"></div>
<script>
$('#sender').click(function(){
var id=document.getElementById('id').value;
var name=document.getElementById('name').value;
var category={"name":name,"id":id};
var jsonData = JSON.stringify(category);
var page="submitCategory";
$.ajax({
type:"post",
url: page,
data:jsonData,
dataType:"json",
contentType : "application/json;charset=UTF-8",
success: function(result){
}
});
alert("提交成功，請在Tomcat控制檯查看服務端接收到的數據");
});
</script>
</body>
</body>
</html>
4.CategorysController.java
package com.category.controller;
import java.util.ArrayList;
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.ResponseBody;
import com.alibaba.fastjson.JSONObject;
import com.category.pojo.Category;
// 告訴spring mvc這是一個控制器類
@Controller
@RequestMapping("")
public class CategorysController {
@ResponseBody
@RequestMapping("/submitCategory")
public String submitCategory(@RequestBody Category category) {
System.out.println("SSM接受到瀏覽器提交的json，並轉換爲Category對象:"+category);
return "ok";
}
@ResponseBody
@RequestMapping("/getOneCategory")
public String getOneCategory() {
Category c = new Category();
c.setId(100);
c.setName("第100個分類");
JSONObject json= new JSONObject();
json.put("category", JSONObject.toJSON(c));
return json.toJSONString();
}
@ResponseBody
@RequestMapping("/getManyCategory")
public String getManyCategory() {
List<Category> cs = new ArrayList<>();
for (int i = 0; i < 10; i++) {
Category c = new Category();
c.setId(i);
c.setName("分類名稱:"+i);
cs.add(c);
}
return JSONObject.toJSON(cs).toString();
}
}
運行結果
本知識點效果有三個，分別是以json方式：提交，獲取單個和獲取多個
提交
http://localhost:8080/submit.html
獲取單個
http://localhost:8080/getOne.html
獲取多個
http://localhost:8080/getMany.html
