无法从 GetJson 方法获取数据

Question

这是我在 Default.aspx 中的代码：

$(function() {
        var dataSource = {};
        $("#MainTree,#SubTree").jstree({
            "json_data": {
                "ajax":{
                    type: "POST",
                    async: true,
                    url: "Default.aspx/GetJson",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    cache: false,
                    success: function(msg) {
                        dataSource = msg;
                    },
                    error: function(err) {
                        alert(err);
                    },
                    data: dataSource,
                },
            },
            "plugins": ["themes", "json_data", "ui", "dnd"]
        });
    });

这是 Default.aspx.cs 中的 GetJson 方法：

[WebGet(ResponseFormat = WebMessageFormat.Json)]
[System.Web.Services.WebMethod]
public static string GetJson()
{
    System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
    Dictionary<string, object> row = null;

    DataTable dtEmployee = new DataTable();

    dtEmployee.Columns.Add("EmpId", typeof(int));
    dtEmployee.Columns.Add("Name", typeof(string));
    dtEmployee.Columns.Add("Address", typeof(string));
    dtEmployee.Columns.Add("Date", typeof(DateTime));

    //
    // Here we add five DataRows.
    //
    dtEmployee.Rows.Add(25, "Rk", "Gurgaon", DateTime.Now);
    dtEmployee.Rows.Add(50, "Sachin", "Noida", DateTime.Now);
    dtEmployee.Rows.Add(10, "Nitin", "Noida", DateTime.Now);
    dtEmployee.Rows.Add(21, "Aditya", "Meerut", DateTime.Now);
    dtEmployee.Rows.Add(100, "Mohan", "Banglore", DateTime.Now);

    foreach (DataRow dr in dtEmployee.Rows)
    {
        row = new Dictionary<string, object>();
        foreach (DataColumn col in dtEmployee.Columns)
        {
            row.Add(col.ColumnName, dr[col]);
        }
        rows.Add(row);
    }
    return serializer.Serialize(rows);
}    

编辑： 这是我检查 GetJson 方法响应时的结果： {"d":"[{\"EmpId\":25,\"姓名\":\"Rk\",\"地址\":\"古尔冈\",\"日期\":\"\/日期(1372999726975)\/\"},{\"EmpId\":50,\"姓名\":\"Sachin\",\"地址\":\"Noida\",\"日期\":\ "\/日期(1372999726975)\/\"},{\"EmpId\":10,\"姓名\":\"Nitin\",\"地址\":\"Noida\",\"日期\ ":\"\/日期(1372999726975)\/\"},{\"EmpId\":21,\"姓名\":\"Aditya\",\"地址\":\"Meerut\",\ "日期\":\"\/日期(1372999726975)\/\"},{\"EmpId\":100,\"姓名\":\"Mohan\",\"地址\":\"Banglore\ ",\"日期\":\"\/日期(1372999726975)\/\"}]"}

结果什么都没有..它只是突然出现“..Loading”然后返回空白页面..请帮我说明这里的问题是什么..非常感谢。

Answer 1

您似乎没有正确阅读文档，所以我建议您先这样做。

当您使用json_data插件时，您需要遵循如下所示的基本结构，可以找到here，这意味着您需要提供以下格式的Json数据：

{ 
    "data" : "node_title", 
    // omit `attr` if not needed; the `attr` object gets passed to the jQuery `attr` function
    "attr" : { "id" : "node_identificator", "some-other-attribute" : "attribute_value" }, 
    // `state` and `children` are only used for NON-leaf nodes
    "state" : "closed", // or "open", defaults to "closed"
    "children" : [ /* an array of child nodes objects */ ]
}

考虑到响应结构，你需要有如下所示的服务器端类：

public class Emp
{
    public EmpAttribute attr { get; set; }
    public string data { get; set; }

}
public class EmpAttribute
{
    public string id;
    public bool selected;
}

您的页面方法应该如下所示：

[WebGet(ResponseFormat = WebMessageFormat.Json)]
    [System.Web.Services.WebMethod]
    public static List<Emp> GetJson()
    {
        List<Emp> empTreeArray = new List<Emp>();

        Emp emp1 = new Emp()
        {
            attr = new EmpAttribute(){ id= "25",selected=false},
            data = "Nitin-Gurgaon"
        };

        Emp emp2 = new Emp()
        {
            attr =  new EmpAttribute(){ id="50",selected=false},
            data = "Sachin-Noida"
        };
        empTreeArray.Add(emp1);
        empTreeArray.Add(emp2);
        return empTreeArray;
    }

您的客户端绑定代码应如下所示：

$(function() {
        var dataSource = {};
        $("#demo1").jstree({
            "json_data": {
                "ajax":{
                    "type": "POST",
                    "url": "Default2.aspx/GetJson",
                    "contentType": "application/json; charset=utf-8",
                    "dataType": "json",
                    success: function(msg) {
                        return msg.d;
                    },
                    error: function(err) {
                        alert(err);
                    }                   
                }
            },
            "plugins": ["themes", "json_data", "ui", "dnd"]
        });
    });

注意 return msg.d in Success 函数中缺少您的代码。

更多示例请见here

请仔细阅读您下次使用的任何插件的文档。

Answer 2

直接在浏览器中输入 http://Default.aspx/GetJson 并检查是否有正确的数据。

另外两个可以添加调试代码的地方是

                success: function(msg) {
                    dataSource = msg;
                },
                error: function(err) {
                    alert(err);
                }

添加断点并调试 javascript。

Answer 3

响应被封装在一个名为“d”的属性中。而不是datasource = msg 你应该有datasource = msg.d