SpringMVC下Ajax数据提交和解析
2015-7-9 13531 0
SpringMVC如果返回给Ajax内容的话，需要用一个注解@ResponseBody，返回内容的格式是自定义的，这里我返回一个Map，Map中有一个List和一个字符串。
一般返回时我们会把返回内容转为JSON即JSONObject，但是如果你不转化，直接返回也是可以的。
这里就写两个方法，一个转为JSONObject，一个没有转。
@RequestMapping(value = "/test")
@ResponseBody
public JSONObject test(HttpServletRequest request) {
String a = request.getParameter("a");
String b = request.getParameter("b");
System.out.println("====>" + a);
System.out.println("====>" + b);
Map<String, Object> map = new HashMap<String, Object>();
List<String> list = new ArrayList<String>();
list.add(new String("a"));
list.add(new String("b"));
map.put("key1", list);
map.put("key2", new String("i am key2"));
JSONObject result = JSONObject.fromObject(map);
return result;
}
@SuppressWarnings("unchecked")
@RequestMapping(value = "/test2")
@ResponseBody
public Map test2(HttpServletRequest request) {
String a = request.getParameter("a");
String b = request.getParameter("b");
System.out.println("====>" + a);
System.out.println("====>" + b);
Map<String, Object> map = new HashMap<String, Object>();
List<String> list = new ArrayList<String>();
list.add(new String("a"));
list.add(new String("b"));
map.put("key1", list);
map.put("key2", new String("i am key2"));
return map;
}
打印收到的参数，这里并没有做处理。返回的内容格式可以从Java代码中看到。
HTML代码如下，注意导入JQuery，知道eval的使用（JSON简介与JS解析JSON ）。基本使用格式都是一样的，传入参数，解析返回内容。
console.log()是在浏览器打印信息，你可以F12打开开发窗口，然后查看打印和一些其他信息。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax测试-java小强</title>
<script type="text/javascript" src="<%=basePath %>Scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
function submitMe(){
var a=$('#a').val();
var b=$('#b').val();
// 注意对该路径权限上放行
var url="<%=request.getContextPath()%>/login/test";
$.ajax({
url:url,
type:"post",
async:false,// 声明ajax同步执行
data:{
"a":a,
"b":b
},
dataType:"text",
success:function(data){
if(data!=null){
console.log("返回内容："+data);
var jsonObj = eval("(" + data + ")");//把总数据转成json
if(jsonObj != null){
var key1 = jsonObj.key1;
var key1Len = key1.length; //得到总数据的个数
if(key1Len>0){
for (var i = 0; i < key1Len; i++) {
var obj = key1[i];
console.log("第"+i+"参数值："+obj);
}
}
console.log("==================");
var key2 = jsonObj.key2;
console.log("key2值："+key2);
}
}
}
});
}
</script>
</head>
<body>
<form action="">
<table>
<tr>
<td>
<input name="a" id="a"/>
</td>
</tr>
<tr>
<td>
<input name="b" id="b"/>
</td>
</tr>
<tr>
<td>
<input type="button" onclick="submitMe()" value="Ajax提交"/>
</td>
</tr>
</table>
</form>
</body>
</html>
我这里写的是test，可以直接修改为test2，其他代码不动，效果一样。
浏览器点击后打印效果如下：
