[英]Use values from JSON response as variables on webpage. Ajax API call
我正在使用 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
}
],
}
}
我不确定您要为位置和团队使用哪些特定字段,但这是想法..
success: function(data) {
$('.Name').html(data.user.name);
$('.Role').html(data.user.role);
},
您可以添加额外的两行以将您的 JSON 响应映射到.Location
和.Team
您可以通过类名获取元素
var userName = document.getElementsByClassName("Name");
然后
userName [0].innerHTML = data.user.name;
并将此代码放入您的成功回调函数中。
一步步:
1)给 HTML 中有趣的部分提供唯一标识符,例如
<div id="name"></div>
2)获取对要修改的 HTML 元素的引用。 使用 jQuery,您可以像这样轻松地获取 HTML 中的单个元素
const $nameElement = $('#name'); // # is for id
“#”部分称为选择器。 有大量不同的选择器在不同的情况下很有用。
3)操作元素。 在你的情况下,给它一些内部 HTML 值。
$nameElement.html(data.user.name);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.