在ajax调用后使用javascript渲染html组件更改其变量

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (96)

我正在使用ajax获取用户数据列表。但是在这个ajax调用之后,我必须为每个用户呈现一个包含许多用户数据的html结构(如数据表)。我的疑问是如何以功能和优雅的方式“存储”HTML代码,以保持我的代码可读,并允许我插入用户数据。

使用组件模板创建文件并通过javascript包含它是最好的主意吗?如果是的话,我怎么能这样做?如果没有,最好的是什么?

Ajax调用:

`

$("#list-users").click(function(ev){
    ev.preventDefault();
    $.ajax({
        url     : '/ajax/Users.php',
    type    : 'POST',
    dataType: 'json',
    data    : data,
    success : function(users){
            users.forEach((user, index) => {
                //The problem is here. I'm looking for a way to
                //"store" the html component code to dont need put
                //the code inside a variable. 
                var complexHtml = '...<p>' + user.name + '</p>...';
                $('.list').append(complexHtml);
            })
    })
})

`

提问于
用户回答回答于

var myUSERS = {};
var myUsersLoaded = false;

$("#list-users").click(function(ev){
    ev.preventDefault();
    $.ajax({
      url     : '/ajax/Users.php',
      type    : 'POST',
      dataType: 'json',
      data    : data,
      success : fctDo_Stuff_User 
    })
})

//...

function fctDo_Stuff_User(users) {
  users.forEach((user, index) => {

    var complexHtml = '...<p>' + user.name + '</p>...';
    $('.list').append(complexHtml);
})

`

扫码关注云+社区

领取腾讯云代金券