zoukankan      html  css  js  c++  java
  • Ajax简单的请求数据以表格的形式渲染到页面

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>长安汽车</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
            <meta name="description" content="">
            <meta name="keywords" content="">
            <script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
            <script src="https://img.huiyiguanjia.com/CDNFile/layer/layer-v3.1.1/layer/layer.js"></script>
        </head>
        <body>
            <div class="main">
                <a onclick="lala()">点击我</a>
                <table id="table" border="1">
    
                </table>
            </div>
        </body>
    </html>
    
    <script type="text/javascript">
        function lala() {
            $.ajax({
                type: "get",
                url: "http://www.sghc.top:8081/api/Values/list",
                dataType: "json",
                error: function(data) {
                    alert("连接超时");
                },
                success: function(data) {
                    console.log(data)
                    console.log(data.data[0].key);
                    console.log(typeof(data.data[0].mimeType));
                    var dataResult = data.data
    
                    if (data.code == 200) {
                        $("#table").html("<tr><td>名称</td><td>图片</td></tr>");
                        for (var i = 0; i < dataResult.length; i++) {
                            var stingPic = dataResult[i].mimeType;
                            if(stingPic=="image/jpeg"){
                                $("#table").append("<tr><td>" + dataResult[i].key +
                                    "</td><td>" + dataResult[i].mimeType +
                                    "</td><tr>")
                            }
    
                        };
    
                    }
    
                }
            });
        }
    </script>

    下图是师傅简化代码后的写法:

  • 相关阅读:
    JS创建类和对象(好多方法哟!)
    BMI身体质量指数计算公式
    点击button显示文字
    xml中设置button的背景颜色
    Android layout的属性介绍
    eclipse中自动补齐代码设置
    android开发中常用的快捷键
    eclipse修改Android工程图标显示
    Android运行报错
    读《人月神话》有感
  • 原文地址:https://www.cnblogs.com/fkcqwq/p/11363638.html
Copyright © 2011-2022 走看看