Jquery.getjson动态创建表单

1.用Jquery.getjson读取数据库数据，然后动态创建一个table，把json格式的数据动态增加到table中

第一步，读取数据库数据，还是用最基本的方法读取数据库，新建一个ahpx页，读取数据库，代码如下：

 1 /// <summary>
 2     /// Handler2 的摘要说明
 3     /// </summary>
 4     public class Handler2 : IHttpHandler
 5     {
 6         string connstr = @"Data Source=JYZ\SQL2008;Initial Catalog=123;User ID=sa;Password=123456"; //数据库连接字符串
 7 
 8         public void ProcessRequest(HttpContext context)
 9         {
10             context.Response.ContentType = "text/plain";
11 
12             tableNameModel tablenamemodel;  //实体model
13 
14             List<tableNameModel> list = new List<tableNameModel>(); //创建一个List<>集合
15             using (SqlConnection conn = new SqlConnection(connstr)) //连接数据库
16             { 
17                 string sql="select * from tableName";   //查询语句
18                 using (SqlCommand cmd = new SqlCommand(sql, conn)) //执行查询方法
19                 {
20                     SqlDataAdapter sb = new SqlDataAdapter(cmd); //查询返回一个数据集
21                    DataTable tb=new DataTable();
22                    sb.Fill(tb); //把查询完的数据保存在table中
23 
24                    for (int i = 0; i < tb.Rows.Count; i++) //把数据转换成对象
25                    {
26                        tablenamemodel = new tableNameModel();
27                        DataRow tr = tb.Rows[i];
28                        tablenamemodel.Id = Convert .ToInt32(tr["id"]);
29                        tablenamemodel.Name =tr["name"].ToString();
30                        tablenamemodel.Gongzr = Convert.ToInt32(tr["gongzr"]);
31                        list.Add(tablenamemodel); //把model增加到List<>中
32                    }
33                  
34 
35                    JavaScriptSerializer ss = new JavaScriptSerializer(); //new一个转换list成json的对象
36                    string dd = ss.Serialize(list);//把集合转换成json;
37                    context.Response.Write(dd); //返回给页面
38 
39                    ;
40 
41                 }
42             }
43            
44         }
45 
46         public bool IsReusable
47         {
48             get
49             {
50                 return false;
51             }
52         }
53     }

现在，我们就把数据库中的数据读了出来而且还把数据转换成了json格式的数据，返回了给页面，那现在，我们就要在页面去处理 json数据了，
代码如下：

 1 <head runat="server">
 2     <title></title>
 3     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
 4     
 5     <script type="text/javascript">
 6         $(function () {
 7 
 8             $("#button1").click(function () {
 9                 //用getjson读取Handler2.ashx的数据
10                 $.getJSON("Handler2.ashx", function (json) {
11                   
12                   // 动态的创建一个table，加上一行
13                     var strhtml = $("<table border='1' width='30%' cellpadding='0' ><tr><td>序号</td><td>姓名</td><td>工资</td></tr></table>");
14                   //循环返回传过来的json数据，Infoindex就是key,Info就是value
15                     $.each(json, function (InfoIndex, Info) {
16 
17                         tr = $("<tr></tr>");//动态的创建一行
18                         var td = $("<td>\"" + Info["Id"] + "</td>");//json的值增加到td中
19                         tr.append(td);
20                         var td = $("<td>\"" + Info["Name"] + "</td>"); //json的值增加到td中
21                         tr.append(td);
22                         var td = $("<td>\"" + Info["Gongzr"] + "</td>"); //json的值增加到td中
23                         tr.append(td);
24                         strhtml.append(tr);//把这一行增加到table中
25                     })
26                     
27                     $("#hide").html(strhtml);//最后把table增加到div中，这样一个表单就好了
28 
29 
30 
31 
32                 })
33             })
34         })
35     </script>
36     <style type="text/css"> 
37      
38     </style>
39 </head>
40 <body>
41     <form id="form1" runat="server">
42     <div>
43      <input id="button1" type="button" name="name" value="提交" />
44         <div id="hide"></div>
45     </div>
46     </form>
47 </body>
48 </html>

这样点击提交，在浏览器就可以看到

这样一个用$.getjson动态加载表单就做好了

这里基础最重要的就是去拼table了，然后就是如何把json格式的数据增加进表里面去，asp.net给我们提供了一个很好很强大的类，这类直接就可以的一个List<>转换成一个json格式的字符串，我们就可以直接返回一个json格式的字符串，然后在前台处理了，不得不说微软的强大，和jquery的方便！