Jquery 从 php/json 文件加载数据并将新内容附加到 div 以进行聊天答案

【问题标题】：Jquery load data from php/json file and append new content to div for chatJquery 从 php/json 文件加载数据并将新内容附加到 div 以进行聊天
【发布时间】：2019-11-18 14:18:53
【问题描述】：

大家好，我尝试做一个小的 jquery/php/mysql 聊天！我需要做的事情如下：

我的 HTML

    <div id="loader"></div>

我的PHP

     $myArray = array();
        if ($result = $mysqli->Query("SELECT * FROM chat AS CHA LIMIT 3 ")) {
            while($row = $result->fetch_array(MYSQLI_ASSOC)) {
                    $myArray[] = $row;
            }
            echo json_encode($myArray);
        }

我的 Json 输出

    [
      {
        "CHA_id": "594",
        "CHA_to": null,
        "CHA_from": "1000",
        "CHA_time": "2019-11-18 00:02:13",
        "CHA_room": "yes",
        "CHA_read": null,
        "CHA_message": "Message 1"
      },
      {
        "CHA_id": "593",
        "CHA_to": null,
        "CHA_from": "1004",
        "CHA_time": "2019-11-17 23:56:47",
        "CHA_room": "yes",
        "CHA_read": null,
        "CHA_message": "Message 2 "
      },
      {
        "CHA_id": "592",
        "CHA_to": null,
        "CHA_from": "1004",
        "CHA_time": "2019-11-17 23:56:47",
        "CHA_room": "yes",
        "CHA_read": null,
        "CHA_message": "Message 3 "
      }
    ]

我的 Jquery 我试试这个

$.getJSON( "https://example.com/JSON.CHAT.php", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

但我只得到这个回应

[object Object]
[object Object]
[object Object]

我需要做什么
1。将内容从 json 输出加载到加载器 div
2.根据“CHA_time”更新div添加新内容每一个帮助都不会受到欢迎，我完全被阻止了。

【问题讨论】：

您似乎忘记了包含您的 JavaScript 代码。请说明您尝试过的内容以及具体没有按预期工作的内容。目前，您似乎只是在广泛寻找如何将 AJAX 与 jQuery 结合使用的示例，互联网上到处都是示例。
感谢您的回复，我尝试了许多片段，但没有任何效果
@RobertMrsic：我们可以理解您遇到的困难，但是“我尝试了很多 sn-ps”并没有告诉我们任何关于您的尝试的信息，而“但什么都没有”并没有告诉我们任何信息关于问题。如果您能详细说明问题的具体细节，那么我们可以提供帮助。
1. api.jquery.com/load 2. 记录的正确排序应该已经发生在您的SQL 查询中，而不是之后。如果您只想要某个时间戳的最新条目（例如您上次在客户端上更新列表的时间） - 那么您应该将该时间戳从客户端传递回服务器，以便您可以明确选择“较新”的记录.
[object Object] 是你得到的，当你试图强制一个 JS 对象进入一个字符串上下文时。您需要访问 JSON 数组中包含的这些对象的各个属性，并将这些对象的值附加到某处。

标签： javascript php jquery html json

【解决方案1】：

正如 04FS 所提到的，您的 JS 不正确。应该是这样的：

$.getJSON( "https://example.com/JSON.CHAT.php", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val.CHA_message + "</li>" );
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

所有“行”都是对象，因此在尝试将其添加到字符串时必须正确使用每个单独的值。

【讨论】：

【解决方案2】：

这个输出：

[object Object]

是你在这里所做的事情的结果：

items.push( "<li id='" + key + "'>" + val + "</li>" );

在这种情况下，val 是您返回的对象之一：

{
    "CHA_id": "594",
    "CHA_to": null,
    "CHA_from": "1000",
    "CHA_time": "2019-11-18 00:02:13",
    "CHA_room": "yes",
    "CHA_read": null,
    "CHA_message": "Message 1"
}

但是系统无法知道如何将该对象有意义地显示为一个简单的字符串。您想显示所有属性吗？带钥匙还是不带钥匙？特定属性？以特定格式？ JavaScript 不/不能知道。所以你需要指定如何格式化它。例如，如果您只想显示一个字段：

items.push( "<li id='" + key + "'>" + val.CHA_id + "</li>" );
//                                        ^--- here

或者如果你想格式化两个字段，用连字符分隔：

items.push( "<li id='" + key + "'>" + val.CHA_id + " - " + val.CHA_message + "</li>" );

基本上，无论你想格式化它，你都需要提供格式化逻辑来做到这一点。

【讨论】：

谢谢你，这是我不知道的。我可以问你一些我希望的其他信息所以 key = Object 和 val 是对的对象行吗？
@RobertMrsic：在您的具体代码中，key 和val 只是您分配给$.each() 回调函数的两个参数的名称。第一个参数只是一个递增整数（概念上类似于基本的for 循环结构），第二个参数是您要迭代的数组的数组元素。