javascript代码实例教程-Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库

发布时间:2019-03-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 利用jquery 动态生成 Table 表单 之后利用each 方法来遍历所有文本框获取文本的value值  并通过Ajax 将数据 提交到Web服务里把数据插入数据

HtML页面

<!DOCTYPE html>

<html XMlns="https://www.w3.org/1999/xhtml">

<head>

    <;meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <tITle></title>

    <script src="js/Jquery1.7.js"></script>

    <script src="js/MyAdd.js"></script>

    <link href="css/MyPages.css" rel="stylesheet" />

</head>

<body>

    <p >

        <p id="pInsert">

            <p id="pBTn">

                <input id="btnDelete" type="button" value="删除行" />

                <input id="btnData" type="button" value="插入行" />

                <input id="btnInsert" type="button" value="添加行" />

            </p>

        </p>

        <table id="tab" cellpadding="0" cellspacing="0">

            <tr>

                <td rowspan="2">姓名</td>

                <td rowspan="2">年龄</td>

                <td colspan="2">血压</td>

            </tr>

            <tr>

                <td>高压</td>

                <td>低压</td>

            </tr>

        </table>

    </p>

    <p id="myp"></p>

</body>

</html>

JS文档

/// <reference path="../WebService1.asmx" />

/// <reference path="../WebService1.asmx" />

$(function () {

    //定义一个全局变量i,用来标识添加了几行

    VAR row = 0;

    var strValue = "";

    //将一行添加到table中去

    $(&#39;#btnInsert').click(function () {

        row++;

        //字符串拼接tr一行中的内容

        var tr = "<tr>";

        for (var i = 0; i < 3; i++) {

            tr += "<td><input id='" + row + "text'" + i + "+' type='text' value=" + row +""+ i + " /></td>";

        }

        tr += "<td><input class='txt' id='" + i + "text4'+ type='text' value=" + row + "" + 4 + " /><input id='Checkbox1' class='ck' name='ckb' type='checkbox' /> </td></tr>";

        $("#tab").append(tr);

    })

    //删除添加的行,先判断checkbox是否选中,然后删除

    $('#btnDelete').click(function () {

        $("input[name=ckb]:checked").each(function () { $(this).parent().parent().remove(); });

    })

    //将i遍历,判断是否存有值,如果有将数据插入数据库

    $('#btnData').click(function () {

        $('table input').each(function () {

            strValue += $(this).val() + ",";

        })

        $.ajax({

            type: 'post',

            contentType: 'application/json',

            url: "../WebService1.asmx/InsertInfo",

            data: "{valuesStr:'" + strValue + "'}",

            success: function (result) {

                $('#myp').html(result.d);

            }

        })

    })

})

 

CSS文档

table tr td{border:1px solid #eee;text-align:center;width:80px;}

#pInsert{width:100%;height:25px;}

#btnInsert{width:50px;height:25px;background-color:#eee;border-style:none;position:absolute;left:185px;}

#btnData{width:50px;height:25px;background-color:#eee;border-style:none;position:absolute;left:235px;}

#btnDelete{width:50px;height:25px;background-color:#eee;border-style:none;position:absolute;left:285px;}

input{width:70px;}

.txt{width:35px;float:left;position:relative;left:5px;}

.ck{width:10px;float:right;}

 

PersonInfo类文件

namespace ASPOilfiled

{

    public class PersonInfo

    {

        public string Name { get; set; }

        public int Age { get; set; }

        public int Hblood { get; set; }

        public int Lblood { get; set; }

    }

}

WebService1.asmx 文件

    [System.Web.Script.Services.ScriptService]

    public class WebService1 : System.Web.Services.WebService

    {

        public static string SQLstr = configurationManager.ConnectionStrings["sqlstr"].ConnectionString;

        [WebMethod]

        public string InsertInfo(string valuesStr)

        {

            string result = "插入失败!";

            string asd = valuesStr.Replace("on,", "");

            string[] str2 = System.Text.RegularExPressions.Regex.Split(asd, ",");

            //for (int i = 0; i < str2.Length; i++)

            //{

            //    result += str2[i] + "<br/>";

            //}

            for (int i = 0; i < str2.Length; i++)

            {

                PersonInfo info;

                if (i % 4 == 0)

                {

                    info = new PersonInfo();

                    info.Name = str2[i];

                    info.Age = Convert.ToInt32(str2[i + 1]);

                    info.Hblood = Convert.ToInt32(str2[i + 2]);

                    info.Lblood = Convert.ToInt32(str2[i + 3]);

                    result = InfoToSql(info).ToString();

                }

            }

            return result;

        }

        public int InfoToSql(PersonInfo info)

        {

            string instSql = "insert into PersonInfo values(@name,@age,@Hblood,@Lblood)";

            SqlConnection con = new SqlConnection(sqlstr);

            con.Open();

            SqlCommand cmd = con.CreateCommand();

            cmd.COMmandText = instSql;

            cmd.Parameters.Add("@name", SqlDbType.VArchar, 32).Value = info.Name;

            cmd.Parameters.Add("@age", SqlDbType.Int).Value = info.Age;

            cmd.Parameters.Add("@Hblood", SqlDbType.Int).Value = info.Hblood;

            cmd.Parameters.Add("@Lblood", SqlDbType.Int).Value = info.Lblood;

            int i = cmd.ExecuteNonQuery();

            cmd.Dispose();

            con.Dispose();

            return i;

        }

    }

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库全部内容,希望文章能够帮你解决javascript代码实例教程-Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。