从js请求到controller到数据库返回数据转换成json格式返回js接收(后台是webapi)(webapi返回json)

版权声明:版权来自tjeneifer https://blog.csdn.net/asdfghjkl110292/article/details/88811975

这是Js文件,先通过$.get来向controler发送请求

$(document).ready(function () {
    $.get("/api/menu/", function (data) {  //data是string类型的json
        
        var zNode = JSON.parse(data);    //将json字符串转换成json对象
       
       alert(zNode.Table[0].id);
        
        //console.log(zNode);
       var znode = zNode.Table;

       zTreeObj = $.fn.zTree.init($("#menuTree"), setting, znode);
     })
    //zTreeObj = $.fn.zTree.init($("#menuTree"), setting, zNodes);   //ztree加载
  //  var nodes = zTreeObj.getNodes()[0].children;
 
});

然后这是controller的代码,先是接收到请求,然后,连接数据库获得dataset
然后利用 jsonconvert.serializeobject来对dataset转换成Json字符串(注意是字符串)
然后返回给js

 // GET api/menu/

        public string getztreenode()
        {

            try
            {
                SqlConnection sqlConnection =
                    new SqlConnection(
                        "Data Source=(local);Initial Catalog=filemaneger;Persist Security Info=True;User ID=sa;Password=123456");
                sqlConnection.Open();
                string sql = "select menuid as id,previousid as pId,Name as name from menu";
                DataSet dataSet = new DataSet();
                SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(sql, sqlConnection);
                sqlDataAdapter.Fill(dataSet);        //将数据填充进dataset                
                return JsonConvert.SerializeObject(dataSet);   //将数据转换成json格式
            }
            catch (Exception ex)
            {
                return ex.ToString();
            }
        }

这是打印出来的json字符串
在这里插入图片描述

然后再来看之前那个js代码,controller返回数据,就是data,然后就可以看着控制台来取数据啦

$(document).ready(function () {
    $.get("/api/menu/", function (data) {  //data是string类型的json
        
        var zNode = JSON.parse(data);    //将json字符串转换成json对象
       
       //alert(zNode.Table[0].id);
        
        console.log(zNode);
       var znode = zNode.Table;

       zTreeObj = $.fn.zTree.init($("#menuTree"), setting, znode);
     })
    //zTreeObj = $.fn.zTree.init($("#menuTree"), setting, zNodes);   //ztree加载
  //  var nodes = zTreeObj.getNodes()[0].children;
 
});

看看此时的data
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/asdfghjkl110292/article/details/88811975