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>