Question

我是jQuery的新手，我正在尝试在对控制器进行ajax调用之后遍历一个字符串列表。在这个控制器中，我返回一个字符串列表，我想在jquery中迭代这个列表并将它呈现给屏幕。这是我的代码。

这是我的控制器

[HttpPost]
public ActionResult GetComments() {
  var cmts = ex.GetComments(psts, psons);
  var lstCmt = ex.GetCommentsList(cments, psons);

  return Json(lstCmt);
}

这是我的观点：

<div>
  <button id="ldBtn" class="btn btn-primary">Load</button>
</div>
<div id="cments">
</div>
<script src="~/Scripts/jquery-3.2.1.js"></script>
<script>
  $(document).ready(function() {
    $("#ldBtn").on('click', function(evt) {
      $("#cments").empty();
      $.ajax({
        type: "POST",
        dataType: "html",
        url: '@Url.Action("GetComments")',
        data: {},
        success: function(lists) {
          //Something needs to be fixed here
          $.each(lists, function(i, name) {
            $('#comments').append('<p>' + name.Value + '</p>');
          });
        }
      });
    });
  });
</script>

当我返回列表时，我收到一个巨大的字符串。我该如何解决这个问题？

先谢谢

Answer 1

您的JS代码中存在一些问题。首先，您要告诉jQuery在dataType设置中期待HTML响应。这就是您将响应视为字符串的原因。这应该更改为JSON，这样jQuery将为您反序列化响应。

其次，您尝试在列表中的每个项目上连接Value属性，但它们是字符串（因为您声明从您的操作返回List<string>），并且不会拥有该财产。您只需附加name本身即可。试试这个：

$("#ldBtn").on('click', function(evt) {
  $("#cments").empty();
  $.ajax({
    url: '@Url.Action("GetComments")',
    type: "POST",
    dataType: 'json',
    success: function(comments) {
      $('#cments').append('<p>' + comments.join('</p><p>') + '</p>');
    }
  });
});

我认为#comments / #cments差异仅仅是因为在创建问题时修改了部分代码。

另请注意，我简化了append()逻辑，以便在一次调用中附加所有注释，这应该稍快一些。

撤回字符串列表并迭代它

1 个答案: