第一种传值：

controller中是几个单独的基本类型参数

@RequestMapping("update")

@ResponseBody//此注解不能省略 否则ajax无法接受返回值

public Map update(Long num, Long id, BigDecimal amount){

Map resultMap = new HashMap();

if(num == null || id == null || amount == null){

resultMap.put("result", "参数不合法！");

return resultMap;

} //xxx逻辑处理

resultMap.put("result", "操作成功");

return resultMap;

}

var params = {};

//params.XX必须与controller中的参数名称一致

//否则在controller中使用@RequestParam绑定

params.num = num;

params.id = id;

params.amount = amount;

$.ajax({

async:false,

type: "POST",

url: "price/update",//注意路径

data:params,

dataType:"json",

success:function(data){

if(data.result==‘SUCCESS‘){

alert("修改成功");

}else{

alert("修改失败，失败原因【" + data + "】");

}

},

error:function(data){

alert(data.result);

}

});

第二种传值：

controller中是参数是实体bean，bean中属性都是基本数据类型

@RequestMapping("add")

@ResponseBody

public Map add(DataVo dataVo){

Map result = null;

if(dataVo.getNum() == null || StringUtils.isBlank(dataVo.geId())){

result = new HashMap();

result.put("msg", "参数不合法！");

return result;

}

//xxx业务逻辑处理

return result;

}

public class DataVo {

private Long num;

private String id;

getset方法

}

var params = {};

params.num = $("#num").val();

params.id = $("#id").val();//注意params.名称 名称与实体bean中名称一致

$.ajax({

type: "POST",

url: "price/add",

data:params,

dataType:"json",

//contentType: "application/json; charset=utf-8",//此处不能设置，否则后台无法接值

success:function(data){

if(data.msg != ""){

alert( data.msg );

}

},

error:function(data){

alert("出现异常，异常原因【" + data + "】!");

}

});

第三种传值：

controller中是参数是实体bean，bean中属性有数组

@RequestMapping("add")

@ResponseBody//此处不能省略 否则ajax无法解析返回值

public Map add(@RequestBody DataVo dataVo){//@RequestBody注解不能省略，否则无法接值

Map resultMap = new HashMap();

//业务逻辑处理

return resultMap;

}

public class DataVo {

private BigDecimal[] nums;

private String id;

getset方法

}

jquery ajax 需要jquery json的插件 进行json序列化，我这里使用了json.js

且配置

datatype:"json",

contentType: "application/json; charset=utf-8",

var params = {};

params.nums = [];

params.id = $("#id").val();//parmas.参数名 注意与实体bean参数名称相同

var prices = document.getElementsByName("prices");//prices 是name="prices"一组input标签

for (var i = 0; i < prices.length; i++) {

params.nums[i] = prices[i].value;

}

$.ajax({

type: "POST",

url: "price/add",

data:JSON.stringify(params),//json序列化

datatype:"json", //此处不能省略

contentType: "application/json; charset=utf-8",//此处不能省略

success:function(data){

alert(data);

},

error:function(data){

alert(data)

}

});

实现一个插入图表的功能，图表的属性包括名称，类型和网址

$(function () {

$(‘#addModal .addbtn‘).on(‘click‘, function (e) {

var form = $(e.currentTarget).parents(‘.modal‘).find(‘form‘);

var data = {

name: form.find(‘input‘)[1].value,

type: form.find(‘input‘)[0].value,

src: form.find(‘input‘)[2].value

};

$.ajax({

contentType: "application/json;charset=utf-8",

url: "/api/charts",

type: "post",

data: JSON.stringify(data),

success: function (data) {

console.log(data);

}

})

})

})

//添加图表

@RequestMapping(value = "/charts", method = RequestMethod.POST)

public ApiResponse addChart(@RequestBody Chart chart) {

chartService.insert(chart);

List results = new ArrayList();

results.add(chart);

return success(1, results);

}

还有一个问题就是前端插入的时候不可能出现id,而Chart对象的属性包括id,name,type,src。

在建表的时候我创建了一个序列vis_chart_id用于id自增，写sql的插入图表的时候只需要写:

insert into vis_chart(id,name,type,src) values(vis_chart_id.nextval,:name,:type,:src)

然而这种方法时不可行的，在前端获取时一直会报错，id的位置为null,

想想也是，前端数据都没有作为一个完整的对象传入，肯定是不能成功的。

步骤如下：

1.首先在dao里面创建一个方法叫getSequence()，获取下一次sequence的值用作新插入的图表的id

@SqlQuery("select vis_chart_id.nextval from dual")

@Mapper(IntegerMapper.class)

Integer getSequence();

此时要注意将insert方法中的SQL语句改成

@SqlUpdate("insert into vis_chart(id,name,type,src) values(:id,:name,:type,:src)")

//插入chart

void insert(@BindBean Chart chart);

2.然后在service中将id赋给chart

public void insert( Chart chart){

ChartDao chartDao = dbi.onDemand(ChartDao.class);

Integer id = chartDao.getSequence();

chart.setId(id);

chartDao.insert(chart);

}

3.这样Controller调用insert方法的时候就会chart就会有id啦

//添加图表

@RequestMapping(value = "/charts", method = RequestMethod.POST)

public ApiResponse addChart(@RequestBody Chart chart) {

chartService.insert(chart);

List results = new ArrayList();

results.add(chart);

return success(1, results);

}