用jquery进行ajax渲染

html代码

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <link rel="stylesheet" href="./css/qingqiu.css">
 9     <script src="./js/jquery-3.6.0.js"></script>
10     <script src="./js/qingqiu.js"></script>
11 </head>
12 <body>
13     <table id="qin_q">
14         <tr>
15             <td>昨日预估收益</td>
16             <td>本月收益</td>
17             <td>累计收益</td>
18             <td>已结算金额</td>
19             <td>未结算金额</td>
20         </tr>
21        
22     </table>
23     <table id="qin">
24         <tr>
25             <th>序号</th>
26             <th>ADPID</th>
27             <th>广告位名称</th>
28             <th>广告类型</th>
29             <th>预估收益</th>
30             <th>操作</th>
31         </tr>
32         
33     </table>
34 </body>
35 </html>
复制代码

css代码

复制代码
 1 *{
 2     padding:0px;
 3     margin: 0px;
 4     font-family:微软雅黑;
 5 }
 6 html,body{
 7     width:100%;
 8     height:100;
 9 }
10 a{
11     text-decoration: none;
12     color: #333;
13     
14 }
15 ul,ol,li{
16     list-style:none;
17 }
18 table{
19     width: 80%;
20 }
21 tr{
22     width: 300px;
23     line-height: 50px;
24     text-align: center;
25 }
26 button{
27     border-radius: 20px;
28     border: none;
29     width: 120px;
30     height: 50px;
31     background-color: greenyellow;
32     color: white;
33 }
34 #qin{
35     margin-top: 20px;
36 }
37 #qin_q{
38     border: 1px solid #333;
39 }
复制代码

jQuery进行ajax渲染

复制代码
$(function(){
    $.ajax({
　　　　　//地址

        url:'http://www.unidatas.site/homeapi/listApi.php?phone=18032885735',
        type:'get',     
        dataType:'json',
        success:function(res){
            console.log(res)
            let data = res.detail.rowlist
            data.forEach(function(ele,index){
                console.log(ele);
                let htm=` <tr>
                <td>${index+1}</td>
                <td>${ele.adpid}</td>
                <td>${ele.ad_name}</td>
                <td>${ele.ad_type}</td>
                <td>${ele.ygsy}</td>
                <td><button>查看应用数据</button></td>
            </tr>`
            $("#qin").append($(htm))
            })
            let col = res.total.rowlist
            
                let ht =` <tr>
                <td>${col.income_month}</td>
                <td>${col.income_total}</td>
                <td>${col.income_yesterday}</td>
                <td>${col.settled}</td>
                <td>${col.unsettled}</td>
            </tr>`
            $("#qin_q").append($(ht))
            
            
        },
        error:function(){
            alert('服务器错误')
        }
    })
    
})
复制代码

 

posted @   倾心一刻  阅读(87)  评论(0)  编辑  收藏  举报
相关博文：
·  用jquery单击切换颜色
·  用js进行加法计算
·  Jquery 代码参考
·  后端开发者——利用jQuery实现Ajax
·  JQuery实现ajax()三种方式
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示