Json API 响应未附加到 li 属性中

Question

我想使用 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 响应 window。

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

Answer 1

试试这个

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

Answer 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>

Answer 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);
    }
});

Answer 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);

  }
});

Json API 响应未附加到 li 属性中

Json API Response is not appending in the li attribute

api

jquery

json

asp.net-ajax