Json API 响应未附加在 li 属性中答案

【问题标题】：Json API Response is not appending in the li attributeJson API 响应未附加在 li 属性中
【发布时间】：2017-05-29 07:50:34
【问题描述】：

我想使用 ul 和 li 从 API 显示菜单，但 ajax 响应未附加在 li 中。请帮帮我。

这是我的 HTML

@{
    ViewData["Title"] = "Home Page";
}
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<div id="demo">
    <ul><li id="results"></li></ul>
</div>

这是我的脚本。

<script>
    $.ajax({
        url: "http://any-url",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        data: JSON.stringify({ "ProjectId": "1" }),
        success: function (response) {
            var title = +response.ParentList;
            console.log(response);
            $.each(response, function () {

                $("#results").append(title.Name);
            })

        },
        error: function (status)
        {
            console.log(status.statusText);

        }
    });
</script>

这是我控制台窗口中的 Ajax 响应。

Object {Message: "Successfully", Status: "OK", Parentlist: Array(10)}
Message:"Successfully"
Parentlist:Array(10)
0:Object
1:Object

Parentlist:Array(10)
 0:Object
  Child:Array(0)
  DisplayOrder:"-8"
  Id:"1012"
  Name:"Mysorie Chif

【问题讨论】：

你在控制台看到了什么？
为什么在var title = +response.ParentList;中使用=+
你能添加来自console.log(response)的回复
@Carsten Lovbo Andersen 在控制台中显示了 json 对象，但它没有附加到 li
@SaqibMajeed 是的，我知道它会显示一个 JSON 对象，但我不确定您是否根据您的 JSON 正确附加了它。这就是为什么我要求您将 console.log 的结果包含在您的问题中。

标签： jquery json api asp.net-ajax

【解决方案1】：

试试这个

 success: function (response) {
        $.each(response.ParentList, function () {
            $("#demo ul").append('<li>'+this.Name+'</li>');
        })
    },

【讨论】：

【解决方案2】：

HTML：

@{
    ViewData["Title"] = "Home Page";
}
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<div id="demo">
    <ul><li class="results"></li></ul>
</div>

脚本：

<script>
    $.ajax({
        url: "http://any-url",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        data: JSON.stringify({ "ProjectId": "1" }),
        success: function (response) {
            var title = +response.ParentList;
            console.log(response);
            $.each(response, function () {

                $("#demo ul").append(title.Name);
            })

        },
        error: function (status)
        {
            console.log(status.statusText);

        }
    });
</script>

【讨论】：

你改变了什么？在您提供的答案中加入一些文字总是一个好主意
$("#demo ul").append(title.Name);您将代码附加到 li 标记中。但是我们希望它在 ul 标记中并重复 li。
在这种情况下title.Name 会不会在每个each 中显示相同的名称？

【解决方案3】：

我想您的 ajax 调用正在返回一个数组（欢迎提供更多信息）。

以下是如何迭代响应项并为每个项附加一个新的 LI：

function onSuccess(response){
  $.each(response, function (index, item) {
    $("#resultRoot").append('<li>'+item.Name+'</li>');
  })
}

为此，您需要指向 UL 标签（而不是 LI）：

<div id="demo">
    <ul id="resultRoot"></ul>
</div>

我让 Ajax 保持原样，只调用 onSuccess 函数：

$.ajax({
    url: "http://any-url",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    type: "POST",
    data: JSON.stringify({ "ProjectId": "1" }),
    success: onSuccess,
    error: function (status)
    {
        console.log(status.statusText);
    }
});

【讨论】：

【解决方案4】：

我会用这条线$("#demo ul").append('<li>' + this.ParentList.Name + '</li>');

这将append 一个li 并通过使用this.ParentList.name 你应该得到当前response 的名称值

$.ajax({
  url: "http://any-url",
  dataType: "json",
  contentType: "application/json; charset=utf-8",
  type: "POST",
  data: JSON.stringify({
    "ProjectId": "1"
  }),
  success: function(response) {
    console.log(response);
    $.each(response, function() {

      $("#demo ul").append('<li>' + this.ParentList.Name + '</li>');
    })

  },
  error: function(status) {
    console.log(status.statusText);

  }
});

【讨论】：