jq 调后端接口返回数据显示在页面上

谁借莪１个温暖的怀抱￠ 2022-11-17 13:46 201阅读 0赞

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>