1）：接口返回数据显示在页面上
<div class="btm" id="transacList"> </div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
teansacList();
});
function teansacList(){
$.ajax({
url: '接口地址',
type: "", // 请求方式get / post
dataType: "json", // 数据类型
data: { },
// 请求成功后的回调函数
success: function(json){
if(json.status == 1 ) {
// data后台返回来的数据
var html = '',
data=json.data;
if (data.length) {
for(var a in data) {
var record = data[a],
picImg = record.deal_pic;
// 将拿到的值显示到html页面
html +='<div class="xinx">'
+'<div class="xinx-1">'
+'<div class="commodityImg"><img src='+picImg+'></div>'
+'<div class="commodityText">'
+'<p>'+ record.title +'</p>'
+'<p>名称：'+ record.gamename +'</p>'
+'</div>'
+'</div>'
+'</div>';
}
}else {
html +='<span style="color: #ccc;">无数据</style>';
}
// append 结尾插入内容
$('#transacList').append(html);
}else{
console.log(json.msg);
}
},
// 请求失败时调用此函数
error:function() {
console.log("连接失败！");
}
});
}
</script>
2）：点击按钮请求接口，改变页面内容的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>分享</title>
</head>
<body>
<div id="phone"><div>
<div id="qrcode" style="display:none;">
<div class="share_bg">
<div class="share_code">
<img class="share_code_img" src=""/>
</div>
<div class="share_btn">
<a href="">
<img src="" class="download_game">
</a>
</div>
</div>
<div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
// 点击‘一键获取’按钮
$('.btn_onekey').on('click', function() {
let share = "";
$.ajax({
url: '', // 接口请求地址
type: "", // 请求方式 ("POST" 或 "GET")， 默认为 "GET"
dataType: "", // 返回的数据类型
// 请求参数
data: {
},
// 请求成功后的回调函数
success: function(json){
if(json.code == 200 ) {
// attr() 设置或返回被选元素的属性值
$('.share_code_img').attr('src',json.data.qrcode_url); // 获取图像 设置src属性
$('.share_btn a').attr('href',json.data.down_url);
$('#qrcode').show();
$('#phone').hide();
}else{
alert(json.msg);
}
},
// 请求失败时调用此函数
error:function() {
alert("连接失败！");
}
});
});
});
</script>
</body>
</html>
版权声明：本文为qq_37916164原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。