ajax异步提交的三种传参方式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiao__jia__jia/article/details/85469178

                              ajax异步提交的三种传参方式

数组传参
Json传参
表单序列化
 

数组传参

用js数组对象，ajax在转化为请求字符串时 会在参数名结尾加[],所以mvc中用@RequestParam("param_array[]")接收

前台ajax发送数据 

<script type="text/javascript">
    function save_param(shxm_id, shxzh_id, shxmch){
        $("#paramArea").append("<input name='shxparam' type='text' value='" +shxm_id + "'>" + shxmch);
        //调用ajax异步请求
        get_list_by_attr();
    }
    
    function get_list_by_attr(){
        //获取参数
        var param_array = new Array();
        $("#paramArea input[name='shxparam']").each(function(i, json){
            param_array[i] = json.value;
        });
        //异步提交请求
        $.get("get_list_by_attr.do", {param_array:param_array}, function(data){
        //刷新商品列表
            $("#skuListInner").html(data);
        });        
    }
</script>

后台接受参数

@RequestMapping("get_list_by_attr")
	public String get_list_by_attr(@RequestParam("param_array[]") String[] param_array, ModelMap map) {

		//如果字符串数组，需要切割字符串，并且转化类型
		return "skuList";
	}

Json传参

1 json的数组对象,提交时会自动转化成查询字符串 2 json的查询字符串

前端代码：

<script type="text/javascript">
	function save_param(shxm_id, shxzh_id, shxmch){

		$("#paramArea").append("<input name='shxparam' type='text' value='{\"shxm_id\":" +shxm_id + ",\"shxzh_id\":" + shxzh_id + "}'>" + shxmch);	
	//调用ajax异步请求
		get_list_by_attr();
	}
	
	function get_list_by_attr(){
		//获取参数
		//var attrJson = {};
		var jsonStr = "flbh2=" + ${flbh2};
		$("#paramArea input[name='shxparam']").each(function(i, json){	
			var json = $.parseJSON(json.value);
			//attrJson["list_attr[" + i + "].shxm_id"] = json.shxm_id;
			//attrJson["list_attr[" + i + "].shxzh_id"] = json.shxzh_id;
			//attrJson["flbh2"]=${flbh2};
			jsonStr = jsonStr + "&list_attr["+i+"].shxm_id=" + json.shxm_id + "&list_attr[" + i + "].shxzh_id=" + json.shxzh_id;
		});
		//异步提交请求
		$.get("get_list_by_attr.do", jsonStr, function(data){
		//刷新商品列表
			$("#skuListInner").html(data);
		});		
	}
</script>

后端代码：

controller类：

@RequestMapping("get_list_by_attr")
	public String get_list_by_attr(MODEL_T_MALL_SKU_ATTR_VALUE list_attr, int flbh2, ModelMap map) {

		//如果字符串数组，需要切割字符串，并且转化类型
		return "skuList";
	}

bean类：
之所以多了一个MODEL_T_MALL_SKU_ATTR_VALUE类，是因为我要在Controller层映射list对象，所以必须要有这个对象的setter方法。

 T_MALL_SKU_ATTR_VALUE.jsp

package com.atguigu.bean;

import java.util.Date;

public class T_MALL_SKU_ATTR_VALUE {
	private int id;
	private int shxm_id;
	private int shxzh_id;
	private int shp_id;
	private String is_sku;
	private Date chjshj;
	private int sku_id;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public int getShxm_id() {
		return shxm_id;
	}

	public void setShxm_id(int shxm_id) {
		this.shxm_id = shxm_id;
	}

	public int getShxzh_id() {
		return shxzh_id;
	}

	public void setShxzh_id(int shxzh_id) {
		this.shxzh_id = shxzh_id;
	}

	public int getShp_id() {
		return shp_id;
	}

	public void setShp_id(int shp_id) {
		this.shp_id = shp_id;
	}

	public String getIs_sku() {
		return is_sku;
	}

	public void setIs_sku(String is_sku) {
		this.is_sku = is_sku;
	}

	public Date getChjshj() {
		return chjshj;
	}

	public void setChjshj(Date chjshj) {
		this.chjshj = chjshj;
	}

	public int getSku_id() {
		return sku_id;
	}

	public void setSku_id(int sku_id) {
		this.sku_id = sku_id;
	}

}

MODEL_T_MALL_SKU_ATTR_VALUE.java

package com.atguigu.bean;

import java.util.List;

public class MODEL_T_MALL_SKU_ATTR_VALUE {

	List<T_MALL_SKU_ATTR_VALUE> list_attr;

	public List<T_MALL_SKU_ATTR_VALUE> getList_attr() {
		return list_attr;
	}

	public void setList_attr(List<T_MALL_SKU_ATTR_VALUE> list_attr) {
		this.list_attr = list_attr;
	}
	
}

表单序列化

$("#loginForm").serialize();

前端代码

<script type="text/javascript">
    //同步
    function to_submit() {
        $("#login_form").submit();
    }
    //异步，需要把dom对象转化为js对象，即对表单序列化
    function b(){
        var form = $("login_form").serialize();
        $.get("login.do",form, function(data){
            alert(data);
        });
    }  
</script>

<form action="login.do" id="login_form" method="post">
                <div class="input">
                    <input type="text" class="input1_01" value="lilei" name="yh_mch"/>
                </div>
                <div class="input2">
                    <input type="text" class="input1_01" value="1" name="yh_mm" />
                </div>
 </form>
            <div class="blank_01"></div>
            <a href="javascript:;" class="aline">
                <div class="red_button" onclick="to_submit()">
                    登录
                </div>
            </a>

后台Controller类代码

//返回值设置输出格式
    @RequestMapping("login", produces="text/html; charset=UTF-8")
    @ResponseBody
    public String login(T_MALL_USER_ACCOUNT user) {
        return "success";
    } 

bean类

package com.atguigu.bean;

public class T_MALL_USER_ACCOUNT {

	private int id;
	private String yh_mch;
	private String yh_nch;
	private String yh_mm;
	private String yh_xm;
	private String yh_shjh;
	private String yh_yx;
	private String yh_tx;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getYh_mch() {
		return yh_mch;
	}

	public void setYh_mch(String yh_mch) {
		this.yh_mch = yh_mch;
	}

	public String getYh_nch() {
		return yh_nch;
	}

	public void setYh_nch(String yh_nch) {
		this.yh_nch = yh_nch;
	}

	public String getYh_mm() {
		return yh_mm;
	}

	public void setYh_mm(String yh_mm) {
		this.yh_mm = yh_mm;
	}

	public String getYh_xm() {
		return yh_xm;
	}

	public void setYh_xm(String yh_xm) {
		this.yh_xm = yh_xm;
	}

	public String getYh_shjh() {
		return yh_shjh;
	}

	public void setYh_shjh(String yh_shjh) {
		this.yh_shjh = yh_shjh;
	}

	public String getYh_yx() {
		return yh_yx;
	}

	public void setYh_yx(String yh_yx) {
		this.yh_yx = yh_yx;
	}

	public String getYh_tx() {
		return yh_tx;
	}

	public void setYh_tx(String yh_tx) {
		this.yh_tx = yh_tx;
	}

}