使用来自 JSON 响应的值作为网页上的变量。 Ajax API 调用
[英]Use values from JSON response as variables on webpage. Ajax API call
问题描述
I am making a ajax call my my API which returns some JSON.
我正在使用 ajax 调用我的 API，它返回一些 JSON。 I would like like to use certain values from the JSON to dynamically update my webpage.我想使用 JSON 中的某些值来动态更新我的网页。
<div class="Name"></div>
<div class="Role"></div>
<div class="Location"></div>
<div class="Team"></div>
I know I have my response data here success: function(data) but I am unsure on how to call the values I want and then put them into variables I can use on my page.我知道我在这里有我的响应数据success: function(data)但我不确定如何调用我想要的值，然后将它们放入我可以在我的页面上使用的变量中。
For example on my page <div class="Name"></div> should show john smith in plain html.例如在我的页面<div class="Name"></div>应该以纯 html 显示john smith 。
HTML With Ajax Call带有 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>
Response回复
{
"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
}
],
}
}
3 个解决方案
解决方案1
1 已采纳 2017-08-31 22:56:50
I am not sure which specific fields you want to use for location and team but this is the idea ..我不确定您要为位置和团队使用哪些特定字段，但这是想法..
success: function(data) {
$('.Name').html(data.user.name);
$('.Role').html(data.user.role);
},
You can add the extra two lines to map your JSON response to .Location and .Team您可以添加额外的两行以将您的 JSON 响应映射到.Location和.Team
解决方案2
0 2017-08-31 22:56:51
you can get the element by classname您可以通过类名获取元素
var userName = document.getElementsByClassName("Name");
then然后
userName [0].innerHTML = data.user.name;
and put this code inside you success callback function.并将此代码放入您的成功回调函数中。
解决方案3
0 2017-08-31 23:00:39
Step by step:一步步：
1) Give your interesting parts of the HTML unique identifiers like 1)给 HTML 中有趣的部分提供唯一标识符，例如
<div id="name"></div>
2) Get a reference to the HTML element you want to modify. 2)获取对要修改的 HTML 元素的引用。 With jQuery you can easily get a hold of individual elements in your HTML like so使用 jQuery，您可以像这样轻松地获取 HTML 中的单个元素
const $nameElement = $('#name'); // # is for id
The "#" part is called a selector. “#”部分称为选择器。 There are tonnes of different selectors that are useful in different circumstances.有大量不同的选择器在不同的情况下很有用。
3) Manipulate the element. 3)操作元素。 In your case, give it some inner HTML value.在你的情况下，给它一些内部 HTML 值。
$nameElement.html(data.user.name);
There are a lot of different convenience methods for different types of manipulation as well.对于不同类型的操作，也有许多不同的便捷方法。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.