Javascript 将JSON响应中的值用作网页上的变量。Ajax API调用

我正在用ajax调用我的API，它返回一些JSON。我想使用JSON中的某些值来动态更新我的网页

<div class="Name"></div>
<div class="Role"></div>
<div class="Location"></div>
<div class="Team"></div>

响应

{  
   "user":{  
      "name":"john smith",
      "email":"jsmith@myapi.com",
      "time_zone":"Asia/Hong Kong",
      "color":"crimson",
      "billed":true,
      "role":"user",
      "description":null,
      "invitation_sent":false,
      "contact_methods":[  
         {  
            "id":"55666655",
            "type":"email_contact_method",
            "summary":"Work",
            "html_url":null,
            "label":"Work",
            "address":"team13@myapi.com.com",
            "send_short_email":false,
            "send_html_email":true
         },
         {  
            "id":"55554555",
            "type":"email_contact_method",
            "summary":"Work",
            "html_url":null,
            "label":"Work",
            "address":"team31@myapi.com.com",
            "send_short_email":false,
            "send_html_email":true
         },
         {  
            "id":"5455555",
            "type":"email_contact_method",
            "summary":"Work",
            "html_url":null,
            "label":"Work",
            "address":"team12@myapi.com.com",
            "send_short_email":false,
            "send_html_email":true
         },
         {  
            "id":"5444555",
            "type":"email_contact_method",
            "summary":"Work",
            "html_url":null,
            "label":"Work",
            "address":"team41@myapi.com.com",
            "send_short_email":false,
            "send_html_email":true
         }
      ],
      "teams":[  
         {  
            "id":"232656TM",
            "name":"team1",
            "description":null,
            "type":"team",
            "summary":"team1 support",
            "privilege":null
         },
         {  
            "id":"25656TM",
            "name":"team1",
            "description":null,
            "type":"team",
            "summary":"team1 support",
            "privilege":null
         },
         {  
            "id":"P767676TM",
            "name":"team1tt",
            "description":null,
            "type":"team",
            "summary":"team1 support",
            "privilege":null
         }
      ],
   }
}

---

我不确定您希望在位置和团队中使用哪些特定字段，但这就是想法

success: function(data) {
    $('.Name').html(data.user.name);
    $('.Role').html(data.user.role);
},

---

您可以添加额外的两行，将JSON响应映射到

.Location

和

.Team

您可以按类名获取元素

var userName = document.getElementsByClassName("Name");

然后

并将此代码放入成功回调函数中。

逐步：

1）为HTML中感兴趣的部分提供唯一标识符，如

<div id="name"></div>

“#”部分称为选择器。这在不同的情况下是有用的

3）操纵该元素。在您的例子中，给它一些内部HTML值

$nameElement.html(data.user.name);

---

还有

为什么您的回复中有

**

？这不是有效的JSON。因此数据（响应）代表整个对象。如您所见，对象中唯一可用的键是

“user”

。要访问它，您可以执行

data.user

。它将返回作为用户值的对象。如果只需要用户名，可以执行

data.user.name

。如果您想从单个contact方法中获得一些东西，则需要像下面这样循环

$（data.user.contact\u methods）.each（function（）{}）并在其中添加逻辑以过滤掉不需要的结果。确保返回的对象不是JSON字符串格式，否则需要对任何字符串化的对象调用
JSON.parse（）
。我如何在“Teams”-“id”之后调用更复杂的东西，比如从我的响应中调用：“25656TM”，？感谢类似data.teams[0].idSorry Chris，$（'.teams'）.html（data.teams[0].id）的方法；不返回任何内容。应该从上面的示例返回232656TM吗？实际上，在JSON中，应该是data.user.teams[0].id
<div id="name"></div>

const $nameElement = $('#name'); // # is for id 

$nameElement.html(data.user.name);