如何使用 jquery 动态刷新和显示列表？答案

【问题标题】：how to dynamically refresh and display the list with jquery?如何使用 jquery 动态刷新和显示列表？
【发布时间】：2019-11-06 06:57:45
【问题描述】：

我正在添加评论部分，但在显示它们时遇到了一些问题。这是我的保存方法

[HttpPost]
public JsonResult AddComment(int id_usr,string comment)
{
   if (ModelState.IsValid)
   {
       Comments kom = new Comments();
       kom.DateComment = DateTime.Now;
       kom.Id_usr = id_usr;
       kom.Comment = comment;
       db.Comments.Add(kom);
       db.SaveChanges();
       return Json(kom);
   }
   return Json(null);
}

获取评论值并保存onClick

var url = window.location.pathname;
var idurl = url.substring(url.lastIndexOf('/') + 1);
$('#submit').click(function () {
  console.log('click')
  $.ajax({
  url: '/form/AddComment',
  method: 'POST',
  data: {
        comment: $("#Comments_Comment").val(),
        id_usr: idurl,
  },
  success: function (data) {
         console.log(data), //to this point all is working

我尝试在列表中显示它看起来像：（只需要日期时间和评论文本）

$("#Comments2_Comment").empty(); 
data.forEach(function (item) {
var rows = "<ul>"
+ "<li>" + item.DateComment + "</li>"
+ "<li>" + item.Comment + "</li>"
+ "</ul>";
$('#Comments2_Comment').append(rows);
});

},

不幸的是它给了我：“TypeError：data.forEach 不是函数” 它应该是什么样子？

我想得到这样的东西

2019-06-19: qwertyu

2019-06-19: asdfghj

【问题讨论】：

确保data 是一个数组而不是一个对象
您正在尝试迭代对象。您必须调试您的 data 变量。您只能遍历数组。
data 是一个对象，那么如何在我的 cmets 列表顶部显示它？
请在您的问题示例中添加您的数据对象，我们将为您提供帮助

标签： javascript c# jquery asp.net-ajax

【解决方案1】：

好的，这是您可以执行的操作的一个简单示例。我刚刚创建了一个 JSON 字符串并将其解析为一个对象以进行演示，但您将使用自己的对象。然后你只需要使用 jQuery 的 $.each 循环遍历它就可以了。让我知道它是否对您有帮助。

let data = '{"names":[{"name":"Michael S."},{"name":"Jim H."},{"name":"Pam B."}]}'

data = JSON.parse(data)

let str = '';

$.each(data.names, (key, val) => {
  str += '<ul><li>' + val.name + '</li></ul>'
})

$('#myDiv').empty().append(str)

li {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myDiv">
</div>

【讨论】：

我只需要$('#MyEditor').empty() 和$('#MyDiv').append("<li>" + data.DateComment + ' ' + data.Comment + "</li>"); ty 来回答这很有帮助