ajax非同步提交的三種傳參方式

陣列傳參
Json傳參
表單序列化
 

陣列傳參

前臺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傳參

前端程式碼：

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

表單序列化

前端程式碼

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

}