ASP.NET前台table通過Ajax擷取綁定後台查詢的json資料

標籤：conf   耳機   varchar   connect   拼接   那是   分享   length   div   

上一篇《ASP.NET前台html頁面AJAX提交資料後台ashx頁面接收資料》寫了前台提交資料後台儲存到資料庫，資料處理以後使用者肯定要查詢。接下來就寫一個前台table通過ajax  Json 擷取值。下面是要實現的效果

 

 每次寫部落格我都是以一個初學者來看的態度去寫，語文也不用合格所有寫的有點淩亂。大家看得懂就行，不明白的留言。

1、先來看看前台html頁面    查詢出來的結果是拼接table上去的

        <div class="yjcxdiv">            <p class="cxancss">                <span>登記人電話：</span><input class="txtwenben" type="number" maxlength="11" id="txtphone" name="txtanme" placeholder="請輸入完整的11位電話號碼" />                <button class="btncxan" id="btnchaxun" name="btnchaxun">查詢</button>            </p>            <div class="yjdjlist">                <table id="tttab">                    <tr id="yjdjtrone">                        <td id="yyxh">序號</td>                        <td id="yyname">儀檢名稱</td>                        <td id="yyxh">規格型號</td>                        <td id="yybh">出廠編號</td>                        <td id="yydate">登記日期</td>                        <td id="yyperson">登&nbsp;記&nbsp;&nbsp;人</td>                        <td id="yyphone">聯絡電話</td>                        <td id="yystate" style="color:red; font-size:14px;font-weight:600;">審核狀態</td>                    </tr>                </table>            </div>        </div>

 

 2、記得添加jQuery檔案，下面是js，  樣式的話自己去調節咯

<script type="text/javascript">        $(document).ready(function () {            $("#btnchaxun").click(function () {//插敘按鈕的單擊事件                var item = "";//定義拼接table字串                $("#tttab tr").remove();//這裡是為了第二次查詢前面插敘的資料清空                $("#tttab").append("<tr id=‘yjdjtrone‘><td id=‘yyxh‘>序號</td><td id=‘yyname‘>儀檢名稱</td><td id=‘yyxh‘>規格型號</td><td id=‘yybh‘>出廠編號</td><td id=‘yydate‘>登記日期</td><td id=‘yyperson‘>登&nbsp;記&nbsp;&nbsp;人</td><td id=‘yyphone‘>聯絡電話</td><td id=‘yystate‘ style=‘color:red; font-size:14px;font-weight:600;‘>審核狀態</td></tr>");
　　　　　　　　　　//拼接表格頭                var _sqltj = $("#txtphone").val();//擷取查詢條件等下作為參數提交到後台                $.ajax({                    type: "post",                    url: "{config.webpath}tools/instrumentlookup_ajax.ashx",//這個提交的路徑記住是一個ashx的頁面  不是aspx頁面                    data: { sqltj: _sqltj },//傳的參數                    success: function (tt) {//成功的函數  裡面的tt就是執行成功返回來的string  為什麼說是string類型呢  等下到後台再看                        var data = JSON.parse(tt);把傳過來的字串轉化為一個對象 json                        alert(tt);//這個是測試的                        $.each(data, function (i, s) {//迴圈賦值到table中                            item = "<tr><td>" + (i + 1) + "</td><td>" + s[‘Name‘] + "</td> <td>" + s[‘Modle‘] + "</td> <td>" + s[‘Number‘] + "</td><td>" + s[‘ADDTIME‘] + "</td><td>" + s[‘Person‘] + "</td><td>" + s[‘Phone‘] + "</td><td>" + s[‘Status‘] + "</td></tr>"                            $("#tttab").append(item);//拼接表格                        })                    },                    error: function () {                        alert("程式異常！查詢出錯"); return;                    }                });            });        });    </script>

 

大家可能疑惑ajax為啥沒有指定dataType是json  我試過 那是不對的  因為幕後處理後不是json傳過來的

3、從後台資料庫擷取資料，我用的是原始的方法網站這裡只需要查詢這一點就不弄那麼麻煩了

     using System.Data;using System.Configuration;using System.Data.SqlClient;using Newtonsoft.Json;//這是添加的命名空間  public void ProcessRequest(HttpContext context)        {            var tj =HttpContext.Current.Request["sqltj"];//接收過來的查詢條件參數            string _sql = string.Format(@"select Name,Modle,Number,CONVERT(varchar(100),AddTime,23) AS ADDTIME,Person,Phone,(case Status when ‘0‘ then ‘未審核‘ when ‘1‘ then ‘通過審核‘  else ‘其他‘ end) AS Status from InstrumentCheck where Phone =‘{0}‘", tj.ToString()); ;            context.Response.ContentType = "text/plain";            SqlConnection conn = new SqlConnection();            conn.ConnectionString = connectionStringgg;            if(conn.State==ConnectionState.Closed)            {                conn.Open();            }            SqlCommand cmd = new SqlCommand();            cmd.CommandText = _sql;            cmd.Connection=conn;            SqlDataAdapter sda = new SqlDataAdapter();            sda.SelectCommand = cmd;            DataSet ds = new DataSet();            sda.Fill(ds);                context.Response.Write(JsonConvert.SerializeObject( ds.Tables[0]));        }

 

 後台這裡記得一定要寫在ProcessRequest(HttpContext context)這個方法裡，你可以自己寫一個方法在通過自己的處理到你寫的方法裡（我試過很麻煩的） 調用的路徑他只會找到ProcessRequest(HttpContext context)這個方法所以寫在裡面就可以啦！這裡要添加一個Json的處理dll檔案Newtonsoft.Json.dl下載（需要的朋友單擊連結下載）然後在程式集添加。

滑鼠放在JsonConvert.SerializeObject( ds.Tables[0])這個方法上看你會發現它string類型的

 我把字串複製出來

[{"Name":"蘋果手機","Modle":"XM0012","Number":"REQU7986","ADDTIME":"2017-08-01","Person":"魏楊 ","Phone":"17687007837","Status":"未審核"},
{"Name":"一二三四五","Modle":"上山打老虎","Number":"老虎不在家","ADDTIME":"2017-08-01","Person":"秦始皇 ","Phone":"17687007837","Status":"通過審核"},
{"Name":"抽水機","Modle":"CH54353","Number":"KJHGF956","ADDTIME":"2017-08-01","Person":"唐太宗 ","Phone":"17687007837","Status":"未審核"},
{"Name":"打火機","Modle":"YY789","Number":"89+KGF","ADDTIME":"2017-08-01","Person":"朱元璋 ","Phone":"17687007837","Status":"未審核"},
{"Name":"平板電腦","Modle":"YY900","Number":"136689","ADDTIME":"2017-08-01","Person":"趙匡胤 ","Phone":"17687007837","Status":"通過審核"},
{"Name":"滑鼠","Modle":"99","Number":"99","ADDTIME":"2017-08-01","Person":"李白 ","Phone":"17687007837","Status":"通過審核"},
{"Name":"單車","Modle":"HK330","Number":"兒童與愛哦","ADDTIME":"2017-08-01","Person":"杜甫 ","Phone":"17687007837","Status":"未審核"},
{"Name":"藍芽耳機","Modle":"YC897978","Number":"11","ADDTIME":"2017-08-01","Person":"岑參 ","Phone":"17687007837","Status":"通過審核"},
{"Name":"機械鍵盤","Modle":"JDVKSL","Number":"uyuyyu","ADDTIME":"2017-08-01","Person":"曹操 ","Phone":"17687007837","Status":"未審核"},
{"Name":"終結者輪胎","Modle":"FRGGT8899","Number":";","ADDTIME":"2017-08-01","Person":"張飛 ","Phone":"17687007837","Status":"通過審核"},
{"Name":"野生雞樅","Modle":"76HHNH","Number":"","ADDTIME":"2017-08-01","Person":"劉備 ","Phone":"17687007837","Status":"通過審核"},
{"Name":"白菜","Modle":"456","Number":"45","ADDTIME":"2017-08-01","Person":"宋江 ","Phone":"17687007837","Status":"未審核"},
{"Name":"青菜","Modle":"CGJH","Number":"DFGHJK","ADDTIME":"2017-08-02","Person":"maozedong ","Phone":"17687007837","Status":"通過審核"},
{"Name":"柴油機","Modle":"X300","Number":"1314669","ADDTIME":"2017-08-02","Person":"魏楊楊 ","Phone":"17687007837","Status":"通過審核"}]

 

這個就是context.Response.Write(JsonConvert.SerializeObject( ds.Tables[0])) 的 內容，很有意思看著是json 實際上卻是string類型的。所以js裡面 var data = JSON.parse(tt);把傳過來的字串轉化為一個對象 json這一步不能少，我就在這裡糾結了1天，用eval（）方法還是沒有達到效果。

ASP.NET前台table通過Ajax擷取綁定後台查詢的json資料