Ajax如何提交数据到springMVC后台

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

现在好多web项目实现前段和后端分离，实现前端和后端技术人员，使他们加快开发，减少沟通上的问题，后台只需要提供访问接口，而前天只需要调用提供的接口即可。减少前后端的沟通上的成本

本项目是开发中发现ajax提交数据产生问题时，写的一个总结。实现ajax的提交数据时的技术问题

本项目目录树：

本项目就一个Controller，AjaxController.java的代码如下：

package com.myshiro.controller;import java.io.IOException;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Set;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;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;@Controller
public class AjaxController { @RequestMapping(value="/ajaxString")
public void a(String sa, String sb, HttpServletRequest request, HttpServletResponse response)
throws IOException{
response.getWriter().println("sa: " + sa + ", sb: " + sb);
} @RequestMapping(value="/ajaxInteger")
public void b(Integer ia, Integer ib, HttpServletRequest request, HttpServletResponse response)
throws IOException{
response.getWriter().println("ia: " + ia + ", ib: " + ib);
} //@RequestBody JSONObject json 把ajax提交的josn参数绑定到JSONObject类型的josn中，可以用来接受List，Map，Date等格式
//然后通过JSONObject的方法进行类型转换
@RequestMapping(value="/ajaxList")
public void d(@RequestBody JSONObject json, HttpServletRequest request, HttpServletResponse response)
throws IOException{
String gid = json.getString("gid");
String myList = json.getString("myList");
//转换成List类型
List<String> myList1 = json.getObject("myList", List.class);
System.out.println(myList1.size()); //转换成Map类型
Map<String, String> myMap = json.getObject("myMap", Map.class);
Set<String> myMapKeySet = myMap.keySet();
for(Iterator<String> iter = myMapKeySet.iterator(); iter.hasNext(); ){
String index = iter.next();
System.out.println("key: " + index + " value: " + myMap.get(index));
} System.out.println(myList);
// response.getWriter().println("gid: " + gid + ", db: " + myList);
response.getWriter().print(json);
}
}

index.jsp前段页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax测试</title>
</head>
<body><div>
<button type="button" onclick="ajaxString()">ajaxString</button>
<button type="button" onclick="ajaxInteger()">ajaxInteger</button>
<button type="button" onclick="ajaxList()">ajaxList</button>
</div><script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
function ajaxString(){
$.ajax({
type: 'post',
url: 'ajaxString',
data: {sa: 'ajaxString_a', sb: 'ajaxString_b'},
success: function(res){
alert(res);
}
});
}function ajaxInteger(){
$.ajax({
type: 'post',
url: 'ajaxInteger',
data: {ia: 10010, ib: 10012},
success: function(res){
alert(res);
}
});
}function ajaxList(){
var myList = new Array();
myList[0] = 'parameter_1';
myList[1] = 'parameter_2';
myList[2] = '参数3';
var myMap = {
'key1': 'value1',
'key2': 'value2',
'key3': 'value3'
}
$.ajax({
type: 'post',
url: 'ajaxList',
dataType: 'json', //表示返回值的数据类型
contentType: 'application/json;charset=UTF-8', //内容类型
traditional: true, //使json格式的字符串不会被转码
data: JSON.stringify({gid: 10001, myList: myList, myMap: myMap}),
success: function(res){
alert(res.gid);
alert(res.myList);
}
});
}
</script>
</body>
</html>