一 jQuery AJAX方法 前台往后台传数据
在GET请求中，不能使用@RequestBody。
在POST请求，可以使用@RequestBody和@RequestParam，但是如果使用@RequestBody，对于参数转化的配置必须统一。
举个例子，在SpringMVC配置了HttpMessageConverters处理栈中，指定json转化的格式，如Date转成‘yyyy-MM-dd’,则参数接收对象包含的字段如果是Date类型，就只能让客户端传递年月日的格式，不能传时分秒。因为不同的接口，它的参数可能对时间参数有不同的格式要求，所以这样做会让客户端调用同事对参数的格式有点困惑，所以说扩展性不高。
如果使用@RequestParam来接受参数，可以在接受参数的model中设置@DateFormat指定所需要接受时间参数的格式。
另外，使用@RequestBody接受的参数是不会被Servlet转化统一放在request对象的Param参数集中，@RequestParam是可以的。
综上所述，一般情况下，推荐使用@RequestParam注解来接受Http请求参数。
1 通过url路径传递参数
js代码
var id = 5;
boolean flag = false;
/**重点：ajax只需要type和url属性*/
$.ajax({
async : false,
cache : false,
type : 'POST',
url : 'area/delete/'+flag+'/'+ id,//（1）请求的action路径,可以传递参数到后台
error : function() {
alert('请求失败 ');
},
success : function(data) {
alert(data);
}
});
java代码
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/*接收url中传来的参数@PathVariable("id") Long id,可以接收基本类型*/
@ResponseBody
@RequestMapping(value = "area/delete/{flag}/{id}", method = RequestMethod.POST)
public String deleteArea(@PathVariable("id") Long id,@PathVariable("flag") boolean flag) {
//处理参数
return "成功";
}
2 通过ajax的data属性
js代码
ajax前台往后台传参数，前台是字符串，后台是数组接收，那么框架会根据逗号来字符串分割成数组 看参数ids
<script>
var postData= { //（2）传递参数到后台，注意后台接收方式
"param1": "param1",
"areaId":2,
"deleteId":3,
"ids" : "254,249,248"
/**重点：ajax的type,url,dataType,data属性*/
$.ajax({
async : false,
cache : false,
type : 'POST',
url : 'area/delete',
dataType : "json",
data : postData,
error : function() {
alert('请求失败 ');
},
success : function(data) {
alert(data);
}
});
</script>
java代码
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/*接收data属性中传来的参数：2种方法 参数名和前台的键名保持一致,@RequestParam*/
@ResponseBody
@RequestMapping(value = "area/delete", method = RequestMethod.POST)
public String editAreaWithFile(String param1,Long areaId,@RequestParam("deleteId") Long deleteId,Long[] ids) {
//处理参数
//这时ids数组为[254,249,248]
return "成功";
}
或者
import javax.servlet.ServletRequest;
@ResponseBody
@RequestMapping(value = "area/delete", method = RequestMethod.POST)
public String getSections(ServletRequest request) {
//用ServletRequest接收参数
String strRailwayId = request.getParameter("param1");
String strAreaId = request.getParameter("areaId");
Long areaId= new Long(strAreaId );
String strDeleteId = request.getParameter("deleteId");
Long deleteId= new Long(strDeleteId );
//处理参数
return "成功";
}
3 通过ajax.data属性传递多个参数
js代码
//第一步：定义json格式数据
var postData = {
"param1" : "param1",
"areaId" : 2,
"deleteId" : 3
};
/**ajax的type,url,dataType,contentType,data属性*/
$.ajax({
async : false,
cache : false,
type : 'POST',
url : 'area/delete',
dataType : "json",
contentType : 'application/json', //第二步：定义格式
data : JSON.stringify(postData), //第二步；把json转为String传递给后台
error : function() {
alert('请求失败 ');
},
success : function(data) {
alert(data);
}
});
java代码
/**通过@RequestBody接收参数*/
@ResponseBody
@RequestMapping(value = "area/delete", method = RequestMethod.POST)
public String editAreaWithFile(@RequestBody Map<String, Object> map) {
String param1 = (String) map.get("param1");
Integer strAreaId = (Integer) map.get("areaId");
Integer strDeleteId = (Integer) map.get("deleteId");
System.out.println("收到的参数==" + param1 + strAreaId + strDeleteId);
// 处理参数
return "成功";
}
二 jQuery AJAX 方法 success()后台传来的4种数据
1.后台返回一个页面
js代码
/**(1)用$("#content-wrapper").html(data);显示页面*/
$.ajax({
async : false,
cache : false,
type : 'POST',
url : 'area/prepareCreate',
error : function() {
alert('smx失败 ');
},
success : function(data) {
$("#content-wrapper").html(data);
}
});
java代码
/*
* (1)不能有注解@RespoonseBody
* (2)返回值类型是String,代表页面所在的文件夹
* (3)如果返回"error"，执行ajax的error方法
*/
@RequestMapping(value = "area/prepareCreate", method = RequestMethod.POST)
public String editAreaWithFile() {
return "area/create;
// return "error";
}
2. 后台返回一个基本类型String,Long等
js代码
$.ajax({
async : false,
cache : false,
type : 'POST',
url : 'app/area/delete',
dataType : "json",
error : function() {
alert('smx失败 ');
},
success : function(data) {
/**重点：前台接收到返回值，直接处理就行*/
alert(data);
}
});
java代码
/**(1)用@ResponseBody注解
(2)可以接收各种参数，url，data(名称匹配或@RequestBody)
(3)返回值类型就是基本类型*/
@ResponseBody
@RequestMapping(value = "area/delete", method = RequestMethod.POST)
public long editArea() {
//处理参数
return 3;
}
3. 后台返回一个实体类
第一步：定义一个实体类
/**
* flag为1 :操作失败
* msg：失败原因；
* flag为0: 操作成功*/
public class AjaxResponseMsg {
private int flag;
private String msg;
}
第二步：js代码
$.ajax({
async : false,
cache : false,
type : 'POST',
url : 'app/area/delete',
error : function() {
alert('smx失败 ');
},
success : function(data) {
var jsonData = JSON.parse(data);
if (jsonData .flag == 0) {//请求成功
alert("后台操作成果");
} else {
alert(jsonData .msg);
}
}
});
第三步：java代码
/**（1）添加注解@ResponseBody
(2)可以接收参数
(3)返回类型就是实体类*/
@ResponseBody
@RequestMapping(value = "area/delete", method = RequestMethod.POST)
public AjaxResponseMsg editAreaWithFile() {
// 做操作
boolean result = true
AjaxResponseMsg ajaxMsg = new AjaxResponseMsg();
if (result == true)
ajaxMsg.setFlag(0);
else {
ajaxMsg.setFlag(1);
ajaxMsg.setMsg("不能给一个传感器添加重复设备");
}
return ajaxMsg; // 返回给前台一个实体类，包括是否操作成功，及失败原因
}
4.后台返回一个实体类list（实体类的字段都是基本类型）
实体类
public class Section{
private Long id; //id
private String name; //名称
}
前台
$.ajax({
async : false,
cache : false,
type : 'POST',
url : "section/getSections",
error : function() {
alert("失败");
},
success : function(data) {
var jsonData = JSON.parse(data); //jsonData是该下路下的所有区间（json格式）
for (var i = 0; i < jsonData.length; i++) {
alert(jsonData[i].id);
alert(jsonData[i].name);
}
}
})
后台
@ResponseBody
@RequestMapping("/section/getSections")
@RequiresPermissions("section:view")
public List<Section> getSections() {
List<Section> sections = new List<Section>();
return sections;
}
5.后台返回一个实体类list（实体类的字段包括List类型）
第一步：定义实体类ChartSeries
public class ChartSeries {
private String name; //曲线名称
private List<Float> data; //曲线的纵坐标
private List<Date> occurTime; //曲线的横坐标
//添加get set方法
}
第二步：js代码
$.ajax({
url : "/dataRecord/chart" , //获取数据列
type : 'GET',
data : {
},
success : function(data) {
formatStringToJson(data);//对数据进行处理
}
});
function formatStringToJson(data) {
jsonData = JSON.parse(data); //把后台传来的数据转来JSON格式
//jsonData是二维数组，因为实体类ChartSeries的字段data也是个list
for (x in jsonData) { //遍历JSON格式的数组取元素, x代表下标
for (y in jsonData[x].data) {
alert(jsonData[x].occurTime[y]) ;//依次获取
alert(jsonData[x].data[y]);
}
}
}
第三步：java代码
@ResponseBody
@RequiresPermissions("dataRecord:view")
@RequestMapping(value = "/dataRecord/chart}", method = RequestMethod.GET)
public List<ChartSeries> getChart(){
List<ChartSeries> list = new List<ChartSeries>();
//给list赋值
return list; // list
}
网友评论