ajax向 controller传值

Posted 2020-09-24

第一种传值：

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中的参数名称一致    
    //否则在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<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){//@RequestBody注解不能省略，否则无法接值  
    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);
}