如何在asp.net中使用jquery将json数据显示到html <ul><li></li></ul>标签中答案

【问题标题】：How to show json data into html <ul><li></li></ul> tag using jquery in asp.net如何在asp.net中使用jquery将json数据显示到html <ul><li></li></ul>标签中
【发布时间】：2014-09-08 17:36:06
【问题描述】：

我正在开发 asp.net 应用程序，我试图从数据库中以 JSON 格式获取数据，并使用 jquery 将该 JSON 数据显示到 html-ul-li 标记中。我的 HTML 页面是：

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript">
    //function GetCompanies() {
    $(document).ready(function () {

       $.ajax({
    type: "POST",
    url: "MobileServices.asmx/BindCategory",
    data: "{}",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    async: true,
    success: OnSuccess,
    error: OnError
});

function OnSuccess(data) {
    $.each(data, function (key, value{
        $("#ulCategory").append("<li><a rel=external href=Category_News.html?ID=" + value.Category_ID + ">" + value.Category_Name + "</li>");
    })

}
function OnError(data) {

}
    });
</script>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <ul id="ulCategory">

        </ul>
    </div>
</form>
</body>
</html>

我访问数据的 WebService 是：

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using Newtonsoft.Json;
using System.Configuration;
namespace MobileNewsAppication
{
/// <summary>
/// Summary description for MobileServices
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]


    [System.Web.Script.Services.ScriptService]
    public class MobileServices : System.Web.Services.WebService
    {

        public class NewsCategory
        {
            public long Category_ID { get; set; }
            public string Category_Name { get; set; }
            public string QFlag { get; set; }
        }



        [WebMethod]
        public string BindAllCategory()
        {
            DataTable dt = new DataTable();
            //List<NewsCategory> details = new List<NewsCategory>();

            using (SqlConnection con = new SqlConnection(Connection))
            {
                SqlCommand cmd = new SqlCommand("AllCategory_Select", con);
                cmd.CommandType = CommandType.StoredProcedure;

                con.Open();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                return JsonConvert.SerializeObject(dt);

            }

        }
    }
    }

但是ul Tag里面没有绑定任何列表项。我认为在 jquery OnSuccess 方法中定义的 foreach 循环可能是错误的。请帮帮我。

【问题讨论】：

您是否想要正确地迭代 JSON 数据。在里面吗？
我想在ul标签中显示数据

标签： javascript jquery html css json

【解决方案1】：

如果这里不是拼写错误，那么它是导致成功回调失败的语法错误...

function OnSuccess(data) {
//  $.each(data, function (key, value{ <- this is wrong
    $.each(data, function() {
        $("#ulCategory").append("<li><a rel='external' href='Category_News.html?ID=" + this.Category_ID + "'>" + this.Category_Name + "</li>");
    });
}

尝试在each 中使用this。我还将链接属性用引号括起来。除此之外，它对我来说看起来不错。如果这不是问题，则将 console.log(data); 作为成功回调的第一行并检查控制台是否存在错误。

【讨论】：

我稍微修改了答案。试试看，让我们知道你的进展情况。
它不正确。在 ul 标记内，它仅显示一次“未定义”而不是“Category_Name”，但我的数据返回 8 行。
您是否尝试像我建议的那样在其中输入console.log？让我知道输出
对象 {d: "[{"Category_ID":1,"Category_Name":"मुख्य खबर"},{"C…बम"},{"Category_ID":12,"Category_Name": "विशेष"}]"} d: "[{"Category_ID":1,"Category_Name":"मुख्य खबर"},{"Category_ID":2,"Category_Name":"देश विदेश"},{" 3,"Category_Name":"छत्तीसगढ"},{"Category_ID":5,"Category_Name":"सम्पादकीय"},{"Category_ID":6,"Category_Name":"पोल"},{"Category_ID": ,"Category_Name":"ज्ञान रंजन"},{"Category_ID":11,"Category_Name":"पत्रबम"},{"Category_ID":12,"Category_Name":"विशेष"}]"
该数据没有意义。这不是一个有效的 json 字符串。尝试在jsonlint.com 上自行检查。在你得到有效的 json 之前，你不能用它做任何事情。