Jquery之简单操作

Jquery版本1.7.1

1，ashx添加数据：

   public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string Method = context.Request.Params["M"];
            string Names = context.Request.QueryString["Names"];
            string Sex = context.Request.QueryString["Sex"];
            switch (Method)
            { 
                case "Insert":
                    InsertMethod(context,Names,Sex);
                    break;
                case "JsonR":
                    ReturnJson(context);
                    break;
            }
        }
        public void InsertMethod(HttpContext context,string Names,string Sex)
        {
            DataClasses1DataContext dc = new DataClasses1DataContext();
            TextTB tb = new TextTB();
            tb.Names = Names;
            tb.Sex = Sex;
            dc.TextTBs.InsertOnSubmit(tb);
            dc.SubmitChanges();
            context.Response.Write("Success");
        }

前台Jquery：

     function Insert() {
            $.ajax({
                url: 'Ashx/Handler1.ashx?Names='+$('#Name').val()+'&Sex='+$('#Sex').val()+'',
                type: "post",
                data: { M: 'Insert'},
                success: function (msg) {
                    alert(msg);
                }
            });
        }

2，Jquery通过JSON展示数据：

DataTable转为JSON类(方法1)：

       public string ConvertDTToJson(DataTable dt)
        {
            StringBuilder JsonString = new StringBuilder();      
            if (dt != null && dt.Rows.Count > 0)
            {
                JsonString.Append("{ ");
                JsonString.Append("\"TableObject\":[ ");
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    JsonString.Append("{ ");
                    for (int j = 0; j < dt.Columns.Count; j++)
                    {
                        if (j < dt.Columns.Count - 1)
                        {
                            JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\",");
                        }
                        else if (j == dt.Columns.Count - 1)
                        {
                            JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\"");
                        }
                    }
                    if (i == dt.Rows.Count - 1)
                    {
                        JsonString.Append("} ");
                    }
                    else
                    {
                        JsonString.Append("}, ");
                    }
                }
                JsonString.Append("]}");
                return JsonString.ToString();
            }
            else
            {
                return null;
            }
        }

 

Datatable转为JSON类(方法2)：

    public string MStoJson(DataTable dt)
        {
            JavaScriptSerializer jss = new JavaScriptSerializer();
            ArrayList dic = new ArrayList();
            foreach (DataRow row in dt.Rows)
            {
                Dictionary<string, object> drow = new Dictionary<string, object>();
                foreach (DataColumn col in dt.Columns)
                {
                    drow.Add(col.ColumnName, row[col.ColumnName]);
                }
                dic.Add(drow);
            }
            return jss.Serialize(dic);
        }

 

返回JSON数据：

      public void ReturnJson(HttpContext context)
        {
            SqlConnection conn = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database1.mdf;Integrated Security=True;User Instance=True");
            SqlDataAdapter sa = new SqlDataAdapter("select * from TextTB order by id desc", conn);
            DataSet ds = new DataSet();
            sa.Fill(ds);
            DataTable dt = ds.Tables[0];
            context.Response.Write(ConvertDTToJson(dt));
        
        }

前台Jquery代码：

   function BindData() {
            $.ajax({
                url: 'Ashx/Handler1.ashx',
                dataType: 'json',
                data: { M: 'JsonR' },
                success: function (msg) {
                    //munually
                    //                    $.each(msg.TableObject,function (key, val) {
                    //                        var row = $("#template").clone();
                    //                        row.find("#PID").text(val.ID);
                    //                        row.find("#PNames").text(val.Names);
                    //                        row.find("#PSex").text(val.Sex);
                    //                        row.appendTo($("#table1"));
                    //                    });
                    //auto
                    $(msg).each(function (i) {
                        var row = $("#template").clone();
                        row.find("#PID").text(msg[i].ID);
                        row.find("#PNames").text(msg[i].Names);
                        row.find("#PSex").text(msg[i].Sex);
                        row.appendTo($("#table1"));
                    });
                }
            });
        
        }
        $(document).ready(function () {
            BindData();
        });

 HTML代码：

 <table class="style1" id="table1" style="text-align: center">
        <tr>
            <th>
                ID
            </th>
            <th>
                Names
            </th>
            <th>
                Sex
            </th>
        </tr>
        <tr id="template">
            <td id="PID">
            </td>
            <td id="PNames">
            </td>
            <td id="PSex">
            </td>
        </tr>
    </table>