jquery+axios

axios使用起来比较方便

这个函数要自己添加,serializeObject这个函数比较坑

$.prototype.serializeObject=function(){  
    var obj=new Object();  
    $.each(this.serializeArray(),function(index,param){  
        if(!(param.name in obj)){  
            obj[param.name]=param.value;  
        }  
    });  
    return obj;  
}; 

• 下拉框和普通jquery一样

axios.get("getDepartList?").then(function(res){
    console.log(res.data);
    for(var i=0; i<res.data.length; i++){
        var tmp=res.data[i];
        $("select[name='departid']").append("<option value='"+tmp.departid+"' >"+tmp.departname+"</option>")
    }
        
});

• 增加,需要把form转化为json

var param = $("form").serializeObject();//转化为json对象
axios.get("addEmp?",{params: param}).then(function(res){
        console.log(res)
});

• 批量删除

//批量删除
  function plsc() {
    var mid = "";
    var ids=[];
    $(":checkbox:checked").each(function(){
        mid += ","+$(this).val();
        ids.push($(this).val())
    })
    //上面的是缩写
    //$("input[type='checkbox']:checked")
    alert(mid);
    mid = mid.substring(1);
    console.log(ids)
    //调用单删的函数
    axios.get("plsc?ids="+ids).then(function(res){
        if(res.data=="success"){
            location.reload();
        }
    });

把数组传到后台,springmvc直接用数组就可以接

• 修改回显,如果有双向绑定就好了

axios.get("getEmp?empid="+empid).then(function(res){
    console.log(res.data);

    $("input[name='empid']").val(res.data.empid);
    $("input[name='empname']").val(res.data.empname);
    $("input[name='empdesc']").val(res.data.empdesc);
    $("input[name='birth']").val(res.data.birth);
    $("select[name='departid']").val(res.data.departid);
    $("select[name='jobid']").val(res.data.jobid);

});

var param = $("form").serializeObject();//转化为json对象
    
axios.get("updateEmp?",{params: param}).then(function(res){
    console.log(res.data);
})

如果能进一步封装使用起来就更方便了