ajax异步提交多参数的方式

﹏ヽ暗。殇╰゛Y 2023-07-24 02:38 11阅读 0赞

今天来总结下ajax在请求后台传递多参数时我们如何传递以及后台如何接受参数的方法。  
老套路，我们先模拟一个场景：根据商品的属性名称和属性值来检索商品，可参考某宝或某东，当我们点击某一个商品的属性和属性值时，检索出符合条件的所有商品，这里涉及shxm\_id（属性名id）和shxz\_id（属性值id）这两类参数，难点在于用户可以同时选择多个属性名和属性值,我们的设计是这样的：用户每添加一组属性名和属性值，在参数区域（paramArea）就会生成一个 < input >，我们需要做的是把这些input中的参数值利用ajax提交到后台，动态刷新页面。

function save_param(shxm_id,shxzh_id,shxmch){
    		$("#paramArea").append("<input name='shxparam' type='text' value=''>"+shxmch);
    		// 调用ajax异步请求
    		get_list_by_attr();
    	}
    	
    	function get_list_by_attr(){
    		// 1.获得参数
    		// 2.异步提交请求
    		// 3. 刷新商品列表
    		$.get("get_list_by_attr.do","参数",function(data){
    			$("#skuListInner").html(data);
    		});

### 1.数组传参 ###

如上设计，通常我们会将参数放到< input >标签的value属性中，然后我们获取标签的value值即可得到参数。这里我们可以先将input标签中的value值写成：

function save_param(shxm_id,shxzh_id,shxmch){
    		$("#paramArea").append("<input name='shxparam' type='text' value='“+shxm_id+"_"+shxz_id+”'>"+shxmch);
    		// 调用ajax异步请求
    		get_list_by_attr();
    	}

如此一来我们就会在页面获得任意对（1\_2,3\_4,…）这样的数组。  
提交参数：

这里面$("\#paramArea input\[name=‘shxparam’\]")获取多个input对象，然后用each方法循环，有多少对参数我们就往数组中添加一个元素（11\_22）,这样一来，我们将param\_array这一数组像\*\*\{param\_array:param\_array\}\*\*传递给后台后，jquery会自动将param\_array数组自动转化为一个查询字符串，例如“get\_list\_by\_attr.do？param\_array\[\]=14\_33&param\_array\[\]=12\_28”,因此我们可以看到，ajax请求时会将数组转化为可查询的字符串之外，还会在传递的参数param\_array之后添加一个“\[ \]”,因此我们mvc接受参数时一定要添加“@RequestParam(“param\_array\[\]”)”,这样一来我们才能正确接收ajax传过来的数组参数，如下：

@RequestMapping("get_list_by_attr")
    	public String get_list_by_attr@RequestParam("param_array[]") String[] param_array, ModelMap map) {
    	//处理接收过来的param_array
    		return "skuList";
    	}

### 2.Json传参 ###

如上所示，这里面有几个点需要注意  
1.我们给input标签value赋值时将参数拼接成json串时，我们特别注意，json的key-value都是用“”（双引号）来表示的，单引号或者不带符号都是畸形的json的，js会直接报错的。  
2. $.parseJSON(data.value)，这个jquery方法会将我们的json解析，这一可以说明data.value的确为json对象。  
3. 我们申明attrJson参数后将其通过ajax传递到后台后，我们如何接受呢？如下：

@RequestMapping("get_list_by_attr")
    	public String get_list_by_attr(AttrList list_attr,  ModelMap map) {
    		// 根据属性查询列表的业务
    		return "skuList";
    	}

我们这里用的AttrList对象来接收json参数，因为这个对象里封装了一个T\_MALL\_SKU\_ATTR\_VALUE对象的list，如下：

public class AttrList {
    
    	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;
    	}
    
    }

而T\_MALL\_SKU\_ATTR\_VALUE这个对象中就包含了我们的shxm\_id和shxz\_id,因此可以成功接收，如果这一块有不明白的可以参考我的上一篇博文。

### 3.表单序列化 ###

如果我们将参数放在一个表单中，如何用ajax异步提交表单呢？  
这里就涉及到表单的序列化，直接上代码：

function get_list_by_attr(){
    		// 获得参数
    		var form = $("#paramArea").serialize();
    		// 异步提交请求
    		// 刷新商品列表
    		$.get("get_list_by_attr.do",form ,function(data){
    			$("#skuListInner").html(data);
    		}); 
    		
    	}

这里我们直接调用serialize()方法将表单序列化为字符串，作为ajax的参数传到后台，后台直接用封装了shxm\_id和shxz\_id的T\_MALL\_SKU\_ATTR\_VALUE对象接收，简单快捷！