从 json 序列化列表对象构建动态表答案

【问题标题】：building dynamic table from json serialized list object从 json 序列化列表对象构建动态表
【发布时间】：2013-03-22 13:03:41
【问题描述】：

我正在尝试通过 ajax 获取序列化的 json 列表并在 html jquery 移动页面中创建动态表。该列表来自代码后面的 sql 数据库。我只是不知道我是否正确地返回了 json 对象，以及如何从 ajax 成功函数中访问它。

我的目标是动态创建一个包含 html 中所有成员的表。

我创建了一个成员类：

public class Member
{
    public Member()
    {
        //
        // TODO: Add constructor logic here
        //
    }

    public String fName { set; get; }

    public String lName { set; get; }



}

这是我在后面的代码中返回成员列表的函数：（写在与sql连接的类中）

public List<Member> return_member_list()
    {
        List<Member> member_list = new List<Member>();

        String fName;
        String lName;


        SqlConnection user_con = connect("ActConString");
        SqlCommand user_command = create_command(user_con, "select m_first_name, m_last_name from member");

        SqlDataReader rdr = user_command.ExecuteReader();


        while (rdr.Read())
        {
            Member m1 = new Member();
            fName = Convert.ToString(rdr["m_first_name"]);
            lName = rdr["m_last_name"].ToString();


            m1.fName = fName;
            m1.lName = lName;



            member_list.Add(m1);


        }

        rdr.Close();
        user_con.Close();

        return member_list;
    }

然后我使用aspx页面web方法返回序列化列表：

   [WebMethod]
    public static String return_member_list()
    {
        dbservices db1 = new dbservices();

        List<Member> member_list = db1.return_member_list();

        var jsonSerialiser = new JavaScriptSerializer();

        var json = jsonSerialiser.Serialize(member_list);

        return json;
    }

和 ajax：

 $(document).ready(function () {



            $.ajax({
                type: "POST",
                url: "getdata.aspx/return_member_list",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function (res) {

                    //this is where I need help


                },
                error: function (res, msg, code) {
                    // log the error to the console
                    alert("The following error occured: " + msg + " " + code);
                } //error

            });

        });

我也会在动态创建表格方面提供帮助：)

【问题讨论】：

你能给我你收到的 JSON 响应示例吗？
[{\"fName\":\"ליבי\",\"lName\":\"פנינ\"},{\"fName\":\"אפרת\",\" lName\":\"אוחנה\"},{\"fName\":\"דביר\",\"lName\":\"ריזנמן\"},{\"fName\":\"ודים\", \"lName\":\"ודימוביץ\"},{\"fName\":\"לינור\",\"lName\":\"אבני\"}]" 这里有希伯来语名字，所以请参考它作为名称：]

标签： c# asp.net ajax jquery-mobile

【解决方案1】：

你需要做如下的成功功能

success: function (res) {
    var parsedData = JSON.parse(res.d);
    var tableStr = "<table>";
    $.each(parsedData, function(){
        tableStr +="<tr><td>"+this.fName+"</td><td>"+this.lName+"</td></tr>";
    });
    tableStr += "</table>";
    $('#tableDiv').html(tableStr);
}

假设你有一个id为tableDiv的div

【讨论】：