码迷,mamicode.com
首页 > 数据库 > 详细

将前台input中的数组异步传到后台并存入数据库

时间:2017-01-14 16:58:05      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:行数据   技术   block   gui   ges   ext   str   erro   div   

将前台input中的数组异步传到后台并存入数据库

先看图:

技术分享

利用ajax异步交互数据,并不是以json数组的形式将数据传到后台,而是利用字符数组的形式将其传到后台。动态新增每一行数据,将每一列对应的数据存入数组,并传到后台中进行入库。(当然可以直接以json数组的形式将每一行的数据传到后台,这里就不详细讲了)

前台js代码:

  ///保存多行数据,运用ajax异步交互请求
        function btnSave() {
            /*传值方式一:将添加的每一字段的值存在数组中,再将数组转换成字符串串传到后台*/
            //定义五个一维数组
            var code = new Array();
            var name = new Array();
            var pwd = new Array();
            var phone = new Array();
            var bmmc = new Array();

            //将表单中的数据添加到各自的数组中
            for (var i = 1; i <= rowL; i++) {
                code.push($("#" + "UserCode" + i).val());//对应每个增加表单中的id相应的值
                name.push($("#" + "UserName" + i).val());
                pwd.push($("#" + "UserPwd" + i).val());
                phone.push($("#" + "Phone" + i).val());
                bmmc.push($("#" + "Bmmc" + i).val());
            }
            //利用js的join方法将数组分割成字符串,用于传值,在后台解析。分割符号为逗号,可自行定义。
            var Code = code.join(‘,‘);
            var Name = name.join(‘,‘);
            var Pwd = pwd.join(‘,‘);
            var Phone = phone.join(‘,‘);
            var Bmmc = bmmc.join(‘,‘);

            //利用ajax进行传值,类型为POST
            $.ajax({
                type: "POST",
                //  dataType: "Text",
                url: "UserList.ashx?Action=Save",
                data: {
                    UserCode: Code,
                    UserName: Name,
                    UserPwd: Pwd,
                    UserPhone: Phone,
                    BmMc: Bmmc,
                    RowLength: rowL//将增加的行数传至后台控制for循环中的参数范围
                },
                success: function (result) {
                    if (result == "true") {
                        noty({ text: "保存成功!", type: "success", layout: "topCenter", timeout: 2000 });
                        Refresh();
                        
                    } else {
                        noty({ text: "保存失败!", type: "error", layout: "topCenter", timeout: 2000 });
                    }
                }
            });
           
        }

2、后台获取数据的代码:

   private string HandleSaveRequest(HttpContext context)
        {
            string result = "False";
            try
            {
                /*定义参数数组,获取前台数据,并解析成数组形式。运用方法split()*/
                string []UserName = context.Request.Form["UserName"].ToString().Split(,);
                string []UserCode = context.Request.Form["UserCode"].ToString().Split(,);
                string []UserPwd = context.Request.Form["UserPwd"].ToString().Split(,);
                string []Phone = context.Request.Form["UserPhone"].ToString().Split(,);
                string[] BmMc = context.Request.Form["BmMc"].ToString().Split(,);
                int  length =Int32.Parse( context.Request.Form["RowLength"].ToString());
                DUserList user = new DUserList();
                MUserList Muser = new MUserList();
                //将数组中的数据遍历插入数据库
                for (int i = 0; i <length; i++)
                {                  
                    Muser.NVFID = System.Guid.NewGuid().ToString();
                    Muser.USERCODE = UserCode[i];
                    Muser.USERNAME = UserName[i];
                    Muser.USERPWD = UserPwd[i];
                    Muser.BMMC = BmMc[i];
                    Muser.PHONEIMEI = Phone[i];
                    // user.Insert(Muser);
                    if (user.Insert(Muser))
                    {
                        result = "true";
                    }
                    else
                    {
                        result = "False";
                    }
                }
          
            }
            catch(Exception ex)
            {

            }
            return result;

        }

注意:ajax不能直接将数组直接传递到后台,所以在数组传递之前用Join()方法将数组转换成字符串,在后台获取到字符串之后再用spit()方法进行分割成数组。

将前台input中的数组异步传到后台并存入数据库

标签:行数据   技术   block   gui   ges   ext   str   erro   div   

原文地址:http://www.cnblogs.com/dongteng/p/6285524.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!