JQuery 从通用处理程序中检索多个值

Question

在 Google 上搜索并阅读文档后，我很困惑这是如何工作的。当调用带有值的通用处理程序并在成功时返回多个值时。如何遍历数据库中的记录？您是循环遍历通用处理程序上的记录还是使用 JQuery Each Function 成功？下面是我当前的代码，当存在多个值时它不起作用。删除 $.each(vardata, function () 就可以了，但是只显示一条记录。

这是您在文本框中输入 Erie 并单击按钮后数据的外观

Business Profile ID: 8 
Business Name: The Boston Store
Phone Number: 814-455-1478
E-Mail: BostonStore@gmail.com

Business Profile ID: 9
Business Name: Sam The Man Pizza
Phone Number: 814-868-3809
E-Mail: Ed@samtheman.com

JQuery 脚本

    $(document).ready(function () {
        $('#button').click(function () {
            $.ajax({
                contentType: "text/html; charset=utf-8",
                data: "ID=" + $('#businessSelect').val(),
                url: "getTest.ashx",
                dataType: "text",
                success: function (data) {
                    var vardata = JSON.parse(data);
                    $.each(vardata, function (index, value) {
                        $("#BusProfileID").html(value.BusProfileID);
                        $("#BusinessName").html(value.BusinessName);
                        $("#BusinessPhone").html(value.BusinessPhone);
                        $("#BusinessEmail").html(value.BusinessEmail);
                    });
                }
            })
        });
    });

ashx 处理程序页面

     public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/html";
        string ID = context.Request.QueryString["ID"];
        SqlConnection conn;
        SqlCommand comm;
        SqlDataReader reader;
        string connectionString = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString;
        conn = new SqlConnection(connectionString);
        comm = new SqlCommand("SELECT BusProfileID, BusinessName, BusinessPhone, BusinessEmail FROM [BusProfile] WHERE BusinessCity = @BusinessCity", conn);
        comm.Parameters.Add("@BusinessCity", System.Data.SqlDbType.VarChar);
        comm.Parameters["@BusinessCity"].Value = ID;
        try
        {
            conn.Open();
            reader = comm.ExecuteReader();
            List<BusinessData> objList = new List<BusinessData>();
            BusinessData objData;
            while (reader.Read())
            {
                objData = new BusinessData();
                objData.BusProfileID = reader["BusProfileID"].ToString();
                objData.BusinessName = reader["BusinessName"].ToString();
                objData.BusinessPhone = reader["BusinessPhone"].ToString();
                objData.BusinessEmail = reader["BusinessEmail"].ToString();
                objList.Add(objData);
                context.Response.Write(JsonConvert.SerializeObject(objList));
            }
            reader.Close();
        }

        finally
        {
            conn.Close();
        }
    }

    public class BusinessData
    {
        public string BusProfileID { get; set; }
        public string BusinessName { get; set; }
        public string BusinessPhone { get; set; }
        public string BusinessEmail { get; set; }
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

ASPX 页面

            <div class="row">
                <div class="columns medium-12">
                    <div class="row">
                       <div class="medium-6 columns medium-centered">
                            <label style="font-size:1em">Select City:</label>
                            <input type="text" id="businessSelect" style="height:2em;" /> <input type="button" id="button" value="Click me" />
                      </div>
                    </div>
                    <div class="row">
                       <div class="medium-6 columns medium-centered">
                            <label style="font-size:1em">Business Profile ID:</label>
                            <label id="BusProfileID" style="font-size:1em;"></label>
                      </div>
                    </div>
                    <div class="row">
                       <div class="medium-6 columns medium-centered">
                            <label style="font-size:1em">Business Name:</label>
                            <label id="BusinessName" style="font-size:1em;"></label>
                      </div>
                    </div>
                    <div class="row">
                        <div class="medium-6 columns medium-centered">
                            <label style="font-size:1em">Phone Number:</label>
                            <label id="BusinessPhone" style="font-size:1em;"></label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="medium-6 columns medium-centered">
                            <label id="BusinessEmail" style="font-size:1em">E-Mail:</label>
                        </div>
                    </div>
                </div>

Answer 1

如果你想通过结果loop，它必须是object。现在你stringifying 你的结果。所以你不能迭代它。

使用JSON.parse 将结果转换为JSON 对象，然后在该对象上使用$.each

var vardata = JSON.parse(data);
$.each(vardata, function (index, value) {
    // TODO
});

因此您不需要拆分并接收到array。您可以在each 语句中引用value 参数。

编辑

要使用来自JSON 的值，您可以使用从服务器结果中设置的属性。

喜欢，

$.each(vardata, function (index, value) {
    $("#BusProfileID").html(value.BusProfileID);
    $("#BusinessName").html(value.BusinessName);
    $("#BusinessPhone").html(value.BusinessPhone);
    $("#BusinessEmail").html(value.BusinessEmail);
});

使用class 保存您从SQL Query 检索到的数据

public class BusinessData
{
    public long BusProfileID { get; set; }
    public string BusProfileID { get; set; }
    public string BusProfileID { get; set; }
    public string  BusProfileID { get; set; }
}

创建一个List<BusinessData> 对象并将阅读器中的每个项目添加到此列表中

reader = comm.ExecuteReader();
List<BusinessData> objList = new List<BusinessData>();
BusinessData objData;
while (reader.Read())
{
    objData = new BusinessData();
    objData.BusProfileID = reader["BusProfileID"].ToString();
    objData.BusinessName = reader["BusinessName"].ToString();
    objData.BusinessPhone = reader["BusinessPhone"].ToString();
    objData.BusinessEmail = reader["BusinessEmail"].ToString();
    objList.Add(objData);
    context.Response.Write(JsonConvert.SerializeObject(objList));
}
reader.Close();

JsonConvert 包含在Newtonsoft.Json nuget 包中。