jquery get和post 请求 渲染数据

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="./index.css">
    <title>jquery请求数据 渲染页面</title>
</head>
<body>
    <div class="box" id="box">
        <div class="ceshi">
            测试
        </div>
       <div class="title">
           我是标题
       </div>
        <!--需要循环的数据-->
        <ul class="ul-box" id="ulBox">
            <!--<li class="li-con">-->
                <!--<span class="number">2015672662</span>-->
                <!--<span class="content">-->
                    <!--<span class="gray-tit">前面</span> 后面内容-->
                <!--</span>-->
                <!--<span class="content con2">-->
                    <!--<span class="gray-tit">前面</span> 后面内容-->
                <!--</span>-->
                <!--&lt;!&ndash;图片&ndash;&gt;-->
                <!--<div class="image">-->
                    <!--<img src="" alt="">-->
                <!--</div>-->
            <!--</li>-->
        </ul>


        <div class="ceshi2">
            测试
        </div>
        <ul class="ul-box" id="ulBox2">
            <!--<li class="li-con">-->
            <!--<span class="number">2015672662</span>-->
            <!--<span class="content">-->
            <!--<span class="gray-tit">前面</span> 后面内容-->
            <!--</span>-->
            <!--<span class="content con2">-->
            <!--<span class="gray-tit">前面</span> 后面内容-->
            <!--</span>-->
            <!--&lt;!&ndash;图片&ndash;&gt;-->
            <!--<div class="image">-->
            <!--<img src="" alt="">-->
            <!--</div>-->
            <!--</li>-->
        </ul>

    </div>



<!--引进jquery-->
     <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
        $(document).ready(function(){
            var arr=[{'a':'aaa','amy':'amy1'},{'a':'bbb','amy':'amy2'},{'a':'ccc','amy':'amy3'}];
            var html1='';
            // 原生js方法
                // for (var key in arr) {
                //     html1 +='<div>'+arr[key].a+'</div>' +
                //         '<div>'+arr[key].amy+'</div>'
                // }

            // each方法
            $.each(arr, function (i, n) {
                html1 +='<div>'+n.a+'</div>' +
                    '<div>'+n.amy+'</div>'
            });

            // $('.ceshi').html(html1);
            $('.ceshi').append(html1);

            // 发送get请求,获取数据
            // https://www.easy-mock.com/mock/5b868ff26c5beb191441278b/example/getList
            $.ajax({
                type: "get",
                dataType: "Json",
                url: "https://www.easy-mock.com/mock/5b868ff26c5beb191441278b/example/getList",
                start: function () { alert("开始获取数据了") },
                complete: function () { alert("获取完了") },
                success: function (data) {
                    var t = eval(data); //强制转换一下json字符串,生成json对象;
                    var data = t.data;
                    $('.title').html(data.title)
                    var rows = t.data.rows
                    console.log(rows);
                    var html = '';
                    $.each(rows,function (i,item) {
                        html+=' <li class="li-con">\n' +
                            '                <span class="number">'+item.number+'</span>\n' +
                            '                <span class="content">\n' +
                            '                    <span class="gray-tit">'+item.before+'</span> '+item.after+'\n' +
                            '                </span>\n' +
                            '                <span class="content con2">\n' +
                            '                    <span class="gray-tit">'+item.before1+'</span> '+item.after1+'\n' +
                            '                </span>\n' +
                            '                <!--图片-->\n' +
                            '                <div class="image">\n' +
                            '                   index:'+i+' <img src="" alt="">\n' +
                            '                </div>\n' +
                            '            </li>';
                    })
                    var oContent = $('#ulBox');
                    // oContent.html(html);
                     oContent.append(html);
                }
            });

            //发送post请求,获取数据
            $.ajax({
                url : 'https://www.easy-mock.com/mock/5b868ff26c5beb191441278b/example/postList/:id',
                data:{id:1},
                cache : false,
                async : true,//异步请求
                type : "POST",
                dataType : 'Json',
                success : function (res){
                    console.log('成功');
                    var t = eval(res); //强制转换一下json字符串,生成json对象;
                    console.log(t.data);

                }
        });


        });




    </script>


</body>
</html>

 

参考图片:

展开阅读全文

没有更多推荐了,返回首页