layui怎么发送ajax获得数据并渲染到前端多个节点

Question

我想要使用laiui显示后端数据渲染到html上，但是不会用，下面是需要渲染的页面：

；

下面是发送ajax让后渲染的代码：

var $ = layui.$, layer = layui.layer;

layui.use(function(){
    $.ajax({
    url: 'http://127.0.0.1:800/my/getUserInfo',
    method: 'GET',
  //   data:{
  //   user_name:req.body.user_name,
  // },
    contentType:"application/json",
    dataType:"json",
    success: function(res) {
              console.log('这是数据！',res)
              

    },
    error: function(error) {
      console.error(error);
    },
  
});

});

Answer 1

参考免费微信小程序：皆我百晓生 作答，经由专家-皆知整理回复，如问题解决，望采纳；如仍有疑问，请评论回复。

你的代码已经实现了通过 AJAX 获取后端数据的功能，接下来你需要将获取的数据渲染到前端页面上对应的节点上。以下是一个简单的例子，展示了如何使用layui将获取的数据渲染到前端页面。假设你的后端返回的数据格式和页面上需要渲染的位置基本匹配。在这种情况下，你可以在 success 回调函数中根据返回的数据填充页面的内容。我会简单概述这个过程并提供一个大致的代码结构，因为具体的渲染方式可能会根据你的页面结构和数据格式有所不同。

首先，确保你的 HTML 页面中有对应的元素来显示这些数据。例如，你可能会有类似这样的结构：

<div id="messageCount">消息数量</div>
<div id="todayIncome">今日收入</div>
<!-- 其他需要显示数据的节点 -->

然后，在你的 AJAX 成功回调函数中，你可以遍历返回的数据并更新这些节点的文本内容。例如：

layui.use(function(){
    $.ajax({
        url: 'http://127.0.0.1:800/my/getUserInfo',
        method: 'GET',
        contentType:"application/json",
        dataType:"json",
        success: function(res) {
            console.log('这是数据！', res);
            // 假设 res 是一个包含各种数据的对象
            // 更新消息数量节点
            $('#messageCount').text(res.messageCount); // 根据实际数据字段调整这里
            // 更新今日收入节点
            $('#todayIncome').text(res.todayIncome); // 根据实际数据字段调整这里
            // 其他节点的更新方式类似，根据实际情况调整选择器和数据字段名
        },
        error: function(error) {
            console.error(error);
        }
    });
});

这个示例假定你已经定义了用于表示各种数据的 HTML 元素（例如，具有特定 ID 的 <div> 元素），并且你的后端返回的数据格式和你在前端需要的格式是一致的。如果这两者之间的映射关系有所不同，你可能需要根据具体情况做一些调整。同时，请确保你的选择器（如 #messageCount）正确地指向了你想更新的元素。如果你的页面结构更复杂，可能需要使用更具体的选择器或者其他的 DOM 操作方法来找到正确的元素。希望这个例子能够帮助你开始解决问题！如果有任何具体的细节需要澄清或者更详细的指导，请告诉我。