如何使用ajax从JSON数组填充不同的<span>元素
免责声明:我完全是JS、jQuery的新手，更不擅长将它们与JSON集成。
我进行了大量的研究和阅读，为了完成这项工作，我感觉自己完全疯了。我终于让它以我想要的方式工作了，但必须有一个更简单的解决方案。
我看到的大多数帖子对于我有限的知识来说都太高级了，所以我即兴创作了if语句。这很可能不是正确的方法，但它起作用了。
我正在向社区求助，看看是否有人能向一个完全的新手解释我做错了什么，以及我如何改进它。
提前感谢您的宝贵时间。
下面是我的代码：
JSON
{"Techs":[
{"id":1, "name":"First Last", "phone":"12345657"},
{"id":2, "name":"Name Two", "phone":"1234567"},
{"id":3, "name":"Another Name", "phone":"321654"},
{"id":4, "name":"Another Guy", "phone":"321654"},
{"id":5, "name":"Name Five", "phone":"321654"}]}
HTML/JS
<body>
<p>Area 1 Tech: <span id="area1">Loading...</span> / Phone: <span id="area1-phone"></span></p>
<p>Area 2 Tech: <span id="area2">Loading...</span> / Phone: <span id="area2-phone"></span></p>
<p>Area 3 Tech: <span id="area3">Loading...</span> / Phone: <span id="area3-phone"></span></p>
<p>Area 4 Tech: <span id="area4">Loading...</span> / Phone: <span id="area4-phone"></span></p>
<p>Area 5 Tech: <span id="area5">Loading...</span> / Phone: <span id="area5-phone"></span></p><script>
$.ajax({
url: 'data.json',
type: 'get',
dataType: 'json',
success: function(data) {
$(data.Techs).each(function(index, value) {
var name = (value.name);
var phone = (value.phone);
if (value.id == 1) {
$("#area1").empty();
$("#area1").append(name);
$("#area1-phone").append(phone);
}
if (value.id == 2) {
$("#area2").empty();
$("#area2").append(name);
$("#area2-phone").append(phone);
}
if (value.id == 3) {
$("#area3").empty();
$("#area3").append(name);
$("#area3-phone").append(phone);
}
if (value.id == 4) {
$("#area4").empty();
$("#area4").append(name);
$("#area4-phone").append(phone);
}
else if (value.id == 5) {
$("#area5").empty();
$("#area5").append(name);
$("#area5-phone").append(phone);
}
// console.log(lax_name);
});
},
error: function(e) {
console.log("Error!")
}
});
/*
$.getJSON('data.json', function(data) {
console.log('test');
});*/
</script>
我想要实现的目标：
基本上，我试图实现的是用技术支持代理的姓名和电话号码填充10个不同的元素，每个元素都有一个唯一的ID (如果有其他方法，则不需要)。然后，JSON将通过HTML表单进行更新(这是我仍然需要解决的问题)。
我相信有一种更好的方法可以做到这一点，我已经尝试过for循环或do while，但不知道如何为每个值分配正确的元素。
任何帮助都是非常感谢的。
致以敬意，
回答 2
Stack Overflow用户
发布于 2016-08-26 06:44:13
您将希望使您的HTML更通用一些。您可以使用类名，而不使用ID。这将使您可以更容易地在JS中获取所需的HTML元素。
<p class="tech">Area 1 Tech: <span class="area">Loading...</span> / Phone: <span class="phone"></span></p>
<p class="tech">Area 2 Tech: <span class="area">Loading...</span> / Phone: <span class="phone"></span></p>
<p class="tech">Area 3 Tech: <span class="area">Loading...</span> / Phone: <span class="phone"></span></p>
<p class="tech">Area 4 Tech: <span class="area">Loading...</span> / Phone: <span class="phone"></span></p>
<p class="tech">Area 5 Tech: <span class="area">Loading...</span> / Phone: <span class="phone"></span></p>完成此操作后，用数据填充HTML就相对容易了。
var allTechs = data.Techs;
for (var i = 0; i < allTechs.length; i++) {
var tech = allTechs[i];
var techElement = $('.tech')[i];
$(techElement).find('.area').html(tech.name);
$(techElement).find('.phone').html(tech.phone);
}看看这个JSFiddle。这可能会让你更好地理解我在说什么。
Stack Overflow用户
发布于 2016-08-26 06:38:07
因为您的数据ids和html ids是对应的，所以只需在jquery选择器中使用这些ids来隔离正确的元素。您可以只显式地设置html，而不是空/append。
jquery实际上是你的for循环遍历你的json数据，然后你可以根据id显式地设置.each()。注意，我删除了phone和name的内部变量，因为操作现在足够简单，您不需要重新赋值，并使用'tech‘而不是'value’来使您在json中迭代的数据更清晰。
<script>
$.ajax({
url: 'data.json',
type: 'get',
dataType: 'json',
success: function(data) {
$(data.Techs).each(function(index, tech) {
$("#area"+tech.id).html(tech.name);
$("#area"+tech.id+"-phone").html(tech.phone);
});
},
error: function(e) {
console.log("Error!")
}
});
</script>祝好运!
https://stackoverflow.com/questions/39155733
复制相似问题
腾讯云开发者
