ajax向 controller传值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax向 controller传值相关的知识,希望对你有一定的参考价值。

第一种传值:

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); }







以上是关于ajax向 controller传值的主要内容,如果未能解决你的问题,请参考以下文章

jquery ajax向spring mvc controller中传值并接受及解析返回值

jquery ajax向spring mvc controller中传值并接受及解析返回值

jquery ajax向spring mvc controller中传值并接受及解析返回值

ajax向后台传值

C# Controller向View传值方式总结

Ajax前台如何向后台传值呢,本人对ajax不懂,肯定大神帮助,在此谢谢了.