javascript - js怎么用java提供的接口动态更新html页面的内容？
本文介绍了javascript - js怎么用java提供的接口动态更新html页面的内容？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
大概是这样子：
<ul>
<li>
<a><img src=""></a>
<h2>图片名称</h2>
<p>年份</p>
<span>价格</span>
</li>
<li>
<a><img src=""></a>
<h2>图片名称</h2>
<p>年份</p>
<span>价格</span>
</li>
<li>
<a><img src=""></a>
<h2>图片名称</h2>
<p>年份</p>
<span>价格</span>
</li>
<li>
<a><img src=""></a>
<h2>图片名称</h2>
<p>年份</p>
<span>价格</span>
</li>
</ul>java后台传给我一个接口，我怎么从这个接口里面获取数据，并更新前台li列表呢？
$.ajax(function(){
url:"",
method:"",
data:"",
success:function(){
}
})
怎么写呢？可不可以讲得详细点，谢谢。
解决方案
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<ul></ul>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
function fill_ul(){
/* $.ajax(function(){
url:"",
method:"",
data:"",
success:function(response){//这里是后台返回的数据结果
response.data.forEach(function(d){
var space = $('<li><a><img src=""></a><h2>图片名称</h2><p>年份</p><span>价格</span></li>');
space.find('img').attr('src', d.img_url);
space.find('h2').text(d.img_name);
space.find('p').text(d.year);
space.find('span').text(d.price);
$('ul').append(space);
})
}
})*/
var d = {img_url: 'https://img.changker.com/85/af/49/85af492184f6ecc4cffdb5b8e423a07c', img_name: 'img_name', year: 2017, price: 800};//这里假设了你需要循环的对象的结构
var space = $('<li><a><img src=""></a><h2>图片名称</h2><p>年份</p><span>价格</span></li>');
space.find('img').attr('src', d.img_url);
space.find('h2').text(d.img_name);
space.find('p').text(d.year);
space.find('span').text(d.price);
$('ul').append(space);
}
$(document).ready(function(){
fill_ul();
})
</script>
</body>
</html>这篇关于javascript - js怎么用java提供的接口动态更新html页面的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
