Question

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

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

我知道我的回复数据是success: function(data)，但我不确定如何调用我想要的值，然后将它们放入我可以在页面上使用的变量中。

例如，在我的网页上<div class="Name"></div>应该在普通的html中显示john smith。

使用Ajax调用的HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>1</title>
  <style>
  img {
    height: 100px;
    float: left;
  }
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>


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

<script>
var authorizationToken = "xxxxxxxxxxxxxxxxxxx";
function myapiRequest(endpoint, method, options) {
    $.ajax($.extend({}, {
    type: 'GET',
    dataType: "json",
    success: function(data) { // my successfully reutnred json
},
    url: "https://api.myapi.com/" + endpoint,
    headers: {
      "Authorization": "Token token=" + authorizationToken,
      "Accept": "application/vnd.myapi+json;version=2"
    }
  },
  options));
}
myapiRequest('/users/12345G?include%5B%5D=contact_methods&include%5B%5D=teams'); // this will be a variable 
</script>
</body>
</html>

响应

{  
   "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
         }
      ],
   }
}

Answer 1

我不确定您希望将哪些特定字段用于位置和团队，但这是理念..

您可以添加额外的两行，将您的JSON回复映射到success: function(data) { $('.Name').html(data.user.name); $('.Role').html(data.user.role); },和.Location

Answer 2

您可以按类名

获取元素

.Team

然后

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

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

Answer 3

一步一步：

1）提供HTML唯一标识符的有趣部分，例如

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

2）获取您要修改的HTML元素的引用。使用jQuery，您可以轻松地在HTML中保存单个元素，如此

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

＆＃34;＃＆＃34; part被称为选择器。 There are tonnes of different selectors在不同情况下有用。

3）操纵元素。在你的情况下，给它一些内在的HTML值。

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

There are a lot of different convenience methods for different types of manipulation也是如此。

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

3 个答案: