javascript

如何把订单的每一行以键值形式提交到服务端

业务场景
有一个订单列表，列表的每一行，分别是商品id，商品名称，商品数量，其中商品数量可以修改，修改完毕后提交整个表单。表单结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table id="productList">
  <tr>
    <th width=300>菜品</th>
    <th width=200>数量</th>
    <th width=300>操作</th>
  </tr>
  <?php foreach($list as $k){ ?>
    <tr class="oparea">
      <td class="list">
        <span class="vegsid" data-id="<?php echo $k['id'];?>"><!--data-id是自定义属性，专门用来存放id-->
          <?php echo $k[ 'name'];?>
        </span>
      </td>
      <td class="list">
        <input class="num" value="1" maxlength="4">
      </td>
      <td>
        <span class="deldata">移除</span>
      </td>
    </tr>
    <?php }?>
    <tr>
      <td colspan=7 class="list">
        <span class="sub">提交订单</span>
      </td>
    </tr>
</table>

现在问题来了，列表的每一行是遍历出来的，我要怎么把每一行对应的商品id和数量提交到服务端呢？
一种方法是使用<input name='goods_id[]' >这样的方式，把商品的id和数量作为两个数组传递给服务端。
还有一种方法是使用js，把每行的商品id和数量组成一个对象，然后将对象所组成的数组传递到服务端。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script type="text/javascript">
    $(function(){
        $(".deldata").click(function(){
            $(this).parents("tr").remove();
            
        })
        //数量输入框
        $(".num").bind('input blur propertychange',function(){
            var num = $(this).val();
            var reg = /^0\.([1-9]|\d[1-9])$|^[1-9]\d{0,8}\.\d{0,2}$|^[1-9]\d{0,4}$/; 
            if(reg.test(num) == false){
                alert('只能输入数字和小数');
                $(this).css({"border":"1px solid red"});
            }else{
                $(this).css({"border":"1px solid #ccc"});
            }
            
        })
        //提交订单
        $(".sub").click(function(){
            //提交数据
            var data = new Array();  //创建js数组
            $.each($(".vegsid"),function(k){
                var data_id = $(this).attr("data-id");
                var data_num = $(this).parents(".list").siblings().eq(1).find(".num").val();
                data[k] = {"id":data_id,"num":data_num};
            })
            $.post(
                "/member/gift/ajax_gift/",
                {"str":data},   //注意：ajax是可以直接把数组提交到服务端的
                function(msg){
                    alert(msg);
                }
            )
        })
    })
   
</script>