欢迎您, 来到 宁时修博客.^_^

单表单处理多数据

2017/10/19 宁时修 php,Jquery,javascript 817
其实呢。标题我也不知道该咋说好。进来看详情内容就知道啦 GOGOGO

最近公司忙着写活动,就这次遇到了这种需求,看图22222.png

在一个单表单,出现这种情况,如上图,代金劵那一块内容,其实在后台处理的时候,是需要把每一行的获得的数据对应插入到数据库的(因为活动中一个活动对应多个代金券),需要前端这边能够更好的区分数据,要让后端知道你到底添加了几个,当然上图所示是2个,其实需求是不固定的,每一个活动对应着多个代金券,也就是说可能有3个,4个,5个甚至更多... 那么这种情况,我们开发该怎么下手呢。其实我一开始也是懵逼的,后面问了下某某大神(是谁就不方便透露了,反正很厉害),让我有了新的思路启发,我的思路是,先给每个input框绑上id(方便后续取值),比如第一个input的ID是a-0 依次排列为 a-0,b-0,c-0,.....(之所以这样设计是因为程序的下标都是从0开始)之后我们再点击+的时候,通过对行(ul li)长度的统计,来变动id号来进而才能获取每行每个ipunt框对应的值。给每一行每个input框绑定好id之后,下一步我们需要把里面的值,存到数组中,这个时候我们需要定义2个数组 一个最外层的数组(arr)用来包裹最终的输出结果,另外一个内部数组(brr )是用来存取从id号中获取对应的id值,再通过brr.push()来压入到数组中。每循环一次都要把内部数组压入到外部数组(arr.push(brr)),最终循环完之后,在把最外层数组转换成json对象字符串传递给php服务器,服务器在通过json_decode()来转换成数组。拿到数组之后,至于后续该如何去操作数据库那么就显得很简单了,整体思路就是这样的。下面我附上所有的代码。


html代码结构

<ul id="box">
    <li>
        <input type="text" id="a-0" placeholder="输入代金券名称">
        <input type="text"  id="b-0"  placeholder="代金券面值" />
        <span class="add">+</span>
    </li>
</ul>
<br/>
<button type="button" id="but">提 交</button>

引入Jquery

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

javascript:;代码

// 点击 +
$("#box").on('click','.add',function(event){
        // 计算li已有的长度
    var _length = parseInt($("ul li").length);
    // 变动id号
    var str = '';
    str += '<li>';
    str += '<input type="text" id="a-' + _length + '" placeholder="输入代金券名称"  />';
    str += '<input type="text" id="b-' + _length + '" placeholder="代金券面值"  />';
    str += '<span class="add">+</span>';
    $("#box").append(str);
});
// 点击提交
$("#but").on('click',function(){
    var _length = parseInt($("ul li").length);//统计长度
    var arr = [];//定义最外层数组
    var _a;// 初始化值
    var _b;// 初始化值
    for (var i=0; i < _length; i++) {
        var brr = [];
        _a = $("#a-" + i).val();
        if (!_a) {
            // 不存在值 代表没有定义 直接跳过
          continue;
        } else {
            // 存在赋值 并且 压入到内部数组
          _b = $("#b-" + i).val();
          brr.push(_a);
          brr.push(_b);
        }
        arr.push(brr)
    }
    // 将数组转换我们想要的json对象字符串 之后在传递给php服务器
    var json_s = JSON.stringify(arr);
    $.post('http://www.shop.com/home/index',{'data' :json_s},function(res){
        console.log(res);
    },"json");
});

php代码:

var_dump( json_decode('"' . $_POST['data'] . '"'),true));
注意你获取的是字符串,所以必须要用"包裹,不然decode出来的是NULL值


最终服务器成功转换数组

2.png

点赞

上一篇 :  前端----HTML系列_01

下一篇 :  前端----CSS系列_01

原文地址 :  https://www.mgchen.com/71.html

说说你的看法

所有评论: (0)