表单提交数组元素时，HTML与JavaScript的区别

说明：本文为作者原创，欢迎大家转载，不过记得声明出处哦~

前言

在html页面提交表单数据时，如果该数据含有数组元素，如批量修改商品、批量删除图片等等，会提交一些数组元素，那么在html与JavaScript中应该如何编写这样的数组呢？

针对这个主题，这里假设一个批量删除图片的操作。

操作

HTML：

在html中，我们通过form表单来提交数据，表单标签主要有<input>等。这里用<input>标签来存储需要删除的图片的id，代码可以表现为：

<input type='hidden' name='ids[]' value='1'>
<input type='hidden' name='ids[]' value='2'>
<input type='hidden' name='ids[]' value='3'>

JavaScript：

在JavaScript中，我们通过ajax来提交表单数据。这里用jquery的ajax来处理请求，代码可以表现为：

$.ajax({
    url: "xxx",
    data: {
        ids: [1, 2, 3]
    }
    success: function(result) {
        console.log(result);
    }
});

同理，在微信小程序中，数组元素的表现形式是与JavaScript的ajax一致的。

后台响应（Java）：

在JAVA后台处理响应时，使用HttpServletRequest request来接收数据。
这里有个区别，就是微信小程序的请求是与html、JavaScript的请求不同的，这里分两类来讲。

应对 html、JavaScript：
String [] ids_arr = request.getParameterValues("ids[]");
一步即可提取出数组元素。

应对 微信小程序：
String ids_str = request.getParameter("ids");
String [] ids_arr = ids_str.split(",");
先获取到的是string格式的以逗号分隔的id字符串集合，然后通过split操作将字符串转为数组。

Tips：

微信小程序在使用wx.request请求来发送数据时，最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。当 data 是数组类型时，将会被转换成以逗号分隔的 String 格式。具体可见：https://developers.weixin.qq.com/miniprogram/dev/api/wx.request.html中的“data 参数说明”一项。

 

-------------------------------------
作者：TGY——一个IT男的画意诗情
来源：优快云