Ajax实现Map对象和对象数组传递

Ajax实现Map对象传递

js代码

//变更保存
function changeSave() {
    var $formParams = $('#form-info').serializeJson();
    $.ajax({
        url: ctx + '/conf/changeSave',
        type: "POST",
        data: $formParams,
        traditional: true, //传统方式
        success: function(data) {
            console.log(data)
            top.layer.msg("变更成功！",{time: 1500});
        },
        error: function() {
            top.layer.msg("程序异常！",{time: 1500});
        }
    });
}



/**
 * 将form里面的内容序列化成json
 * 相同的checkbox用分号拼接起来
 * @param {dom} 指定的选择器
 * @param {obj} 需要拼接在后面的json对象
 * @method serializeJson
 * */
$.fn.serializeJson=function(otherString){
  var serializeObj={},
    array=this.serializeArray();
  	$(array).each(function(){
    if(serializeObj[this.name]){
      serializeObj[this.name]+=';'+this.value;
    }else{
      serializeObj[this.name]=this.value;
    }
  });

Controller层代码

@RequestMapping("/changeSave")
@ResponseBody
public void changeSave(@RequestParam Map<String,String> map) {
	confService.changeSave(map);
}

Ajax实现对象数组传递

js代码

//变更保存
function changeSave() {
    var $formParams = $('#form-info').serializeJson();
    var formParamsArr = objToArray($formParams)
    $.ajax({
        url: ctx + '/conf/changeSave',
        type: "POST",
        data: {confJson:JSON.stringify(formParamsArr)},
        traditional: true,
        success: function(data) {
            console.log(data)
            top.layer.msg("变更成功！",{time: 1500});
        },
        error: function() {
            top.layer.msg("程序异常！",{time: 1500});
        }
    });
}

/**
 * josn对象转对象数组
 * 入参格式：{maxAmount:'10000',uploadAmount:'20000'}
 * 出参格式：[{key:'maxAmount',value:'10000'},{key:'uploadAmount',value:'20000'}]
 */
function objToArray(obj) {
    var arr = []
    for(var i in obj){
        var o = {};
        o.key = i;
        o.vlaue = obj[i];
        arr.push(o)
    }
    return arr
}

Controller层代码

@RequestMapping("/changeSave")
@ResponseBody
public void changeSave(String confJson) {
	List<Conf> confList = (List<Conf>)JsonUtils.toList(confJson,Conf.class);
	confService.changeSave(confList);
}

JsonUtils工具类代码

package cn.com.json.utils;

import com.alibaba.fastjson.JSON;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;

import java.util.List;

/**
 * @ClassName: JsonUtils
 * @Description: Json工具类
 */
public class JsonUtils {

    private static Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create();

    /**
     * @Description: 对象转json字符串
     * @Title: toJson
     * @param  Object
     * @return String
     */
    public static String toJson(Object src) {
        return gson.toJson(src);
    }

    /**
     * @Description: json转Object
     * @Title: toObject
     * @param json
     * @param className
     * @return Object
     */
    public static Object toObject(String json, Class<?> className) {
        return JSON.parseObject(json, className);
    }

    /**
     * @Description: json转List
     * @Title: toList
     * @param json
     * @param className
     * @return List
     */
    public static List<?> toList(String json, Class<?> className) {
        return JSON.parseArray(json, className);
    }

}

---

---

下面是整理的提交方式

ajax传递数组

前台代码

var deleteNum= [];//定义要传递的数组
deleteNum.push("1");
deleteNum.push("2");
deleteNum.push("3");//向数组中添加元素
 
$.ajax({
    type:"post",
    url:"deleteNum.do",
    data:{deleteNum:deleteNum},
    traditional: true,//必须指定为true
    success:function(data){
        if(data.success){
            deleteNum = [];
        }
    }
});

后台代码

 public ActionResult deleteNum(String[] deleteNum){
    //这个时候已经得到了deleteNum数组值
    return Json(new {status=1});
 }

自定义对象接收的方式

 /**
    * 自定义对象，用于接受参数
    * 表单列表对象 用于接收form表单提交的对象数组
  */
  public class FormListObject {
       private ArrayList<User> userlist;
       public ArrayList<User> getUserlist() {
           return userlist;
       }
       public void setUserlist(ArrayList<User> userlist) {
           this.userlist= userlist;
       }
  ｝

public AjaxResult saveOrUpdateUser(FormListObject list){
    List<User> userlist = list.getUserlist(); //你会看到你想要的
}

ajax传递对象

js代码

  var scatalog = new Object();
    scatalog.id =3;
    scatalog.pId = 5;
    var scontent = new Object();
    scontent.id=6;
    scontent.catalogId =66;
    $.ajax({
        type : 'POST',
        url : 'testSendValue/sendValue',
        contentType : 'application/json;charset=utf-8', //设置请求头信息
        dataType:"json",
        data :JSON.stringify({scatalog:scatalog,scontent:scontent}),//scatalog和scontent名称必须和TestSendValueDto 类的这两个类的属性名保持一致
        success: function(data){
            alert(data);
        } 
});

Controller层代码

@RequestMapping("sendValue")
@ResponseBody
public String test(@RequestBody TestSendValueDto dto){
 		return "succeed";
}

//自定义对象
public class TestSendValueDto {
    public StandardCatalog scatalog;
    public StandardContent scontent;

    public StandardCatalog getScatalog() {
        return scatalog;
    }
    public void setScatalog(StandardCatalog scatalog) {
        this.scatalog = scatalog;
    }
    public StandardContent getScontent() {
        return scontent;
    }
    public void setScontent(StandardContent scontent) {
        this.scontent = scontent;
    }
}

ajax传递数组

js代码

/**
 * 传数组：如果你的array没有push任何东西，只是new了一下，这样是无法进到后台的
 * 如果值为空，那么传值之前一定要加上array=[null],否则进不了后台
 */
 var array = new Array();
 array.push(1);
 array.push(2);
 $.ajax({
	type:"post",
	url:"testSendValue/sendValue",
	data:{array:array,id:3},
	traditional: true,//传统方式
	success:function(data){
   	    if(data.success){
           alert(data.success);
   	    }
    }
 });

Controller层代码

/*
* 后台接收@RequestParam里的名字（"array[]"）必须和你传的一样
* /
@RequestMapping("sendValue")
@ResponseBody
public String test(@RequestParam("array[]") List<String> array1, int id){
     return "succeed";
}