怎么通过ajax从后台获取json数据

Posted 2023-04-14

1.第一步：创建异步对象
var xhr=new XMLHttpRequest ();//创建一个异步对象。
上面创建异步对象的方法非IE浏览器都支持。IE7以上也支持。
2.第二步：创建http请求（只是打开和url的连接，并不会发送请求。）
var xhr=new XMLHttpRequest();
xhr.open("get","接口的地址","true");
//参数一：发送请求的方式：方式分别有post和get
//参数二：请求地址
//参数三：是否是异步提交true:异步，flase:同步提交

//如果使用post请求需要为post请求设置一个请求头（必须在发送数据之前）设置方法如下：
//xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3.第三步：发送数据（get和post发送数据的方式不相同）
var xhr=new XMLHttpRequest ();//创建一个异步对象。
xhr.open("get","接口地址？name=zhangsan","true");
//在发送数据上需要注意的是get和post的发送方式
//get：数据需要拼接到open方法里面的URL地址里格式为URL？数据。（注意：get方式也还是需要调用send方法如不调用数据将不会发送）
//post：数据直接写到send方法里即可如下：
// xhr.send("name=zhangsan");
4.第四步：设置监听请求状态的回调函数
请求状态分为5步：
0.未初始化：异步对象创建出来但是还没有打开连接，（即未调用open方法）
1.已初始化：异步对象已经创建并且打开了连接（调用了open方法），但是还没有发送请求（未调用end方法）
2.已发送数据：已经调用了send方法，但web服务器响应还未返回
3.正在接收：web服务器接收完数据并且处理完毕后，向客户端发送响应结果
4.接收完毕：当web服务器响应的数据全部接收完毕
以上序号对应readyState的值
完整的是这样：
var xhr=new XMLHttpRequest ();//创建一个异步对象。
xhr.open("get","接口地址","true");
//下面的回调函数是会动态监听请求状态
xhr.onreadystatechange=function()
//readyState属性会记录下5种请求状态
if(xhr.readyState == 4)
alert("web服务器响应的数据全部接收完毕")

参考技术A 利用请求地址，后台会进行处理数据，然后返回。

ASP.NET前台table通过Ajax获取绑定后台查询的json数据

上一篇《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（）方法还是没有达到效果。