ajax向 controller傳值
阿新 • • 發佈:2017-06-25
bind ets elements 必須 api stp light cnblogs into
第一種傳值:
controller中是幾個單獨的基本類型參數
@RequestMapping("update") @ResponseBody//此註解不能省略 否則ajax無法接受返回值 public Map<String,Object> update(Long num, Long id, BigDecimal amount){ Map<String,Object> resultMap = new HashMap<String, Object>(); if(num == null || id == null || amount == null){ resultMap.put("result", "參數不合法!"); return resultMap;} //xxx邏輯處理 resultMap.put("result", "操作成功"); return resultMap; }
var params = {}; //params.XX必須與controller中的參數名稱一致 [email protected] 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<String,Object> add(DataVo dataVo){ Map<String, Object> result = null; if(dataVo.getNum() == null || StringUtils.isBlank(dataVo.geId())){ result = new HashMap<String, Object>(); 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<String,Object> add(@RequestBody DataVo dataVo)[email protected],否則無法接值
Map<String,Object> resultMap = new HashMap<String, Object>();
//業務邏輯處理
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<Chart> addChart(@RequestBody Chart chart) {
chartService.insert(chart);
List<Chart> results = new ArrayList<Chart>();
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<Chart> addChart(@RequestBody Chart chart) { chartService.insert(chart); List<Chart> results = new ArrayList<Chart>(); results.add(chart); return success(1, results); }
ajax向 controller傳值