Question

我正在尝试通过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

            });

        });

我也会动态创建表格的帮助：）

Answer 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

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

1 个答案: