jq ajax简单使用方法

最新推荐文章于 2021-10-11 17:15:19 发布

金翅

最新推荐文章于 2021-10-11 17:15:19 发布

阅读量338

点赞数

分类专栏： html5+css3 js+jq 文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_37103514/article/details/105358050

版权

html5+css3 同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

js+jq

21 篇文章 0 订阅

订阅专栏

json

{
    "list": [
        {
            "id": 1,
            "img": "mobile_img/img.png",
            "title": "香肠派对",
            "describe": "v8.66版本S4赛季“疯狂实验室”上线 ，彩虹岛突现水晶矿脉，全新点位“实验室”从天外飞来，香肠派…",
            "androidHref":"https://l.tapdb.net/tETtEDoe",
            "iosHref":"https://itunes.apple.com/cn/app/%E9%A6%99%E8%82%A0%E6%B4%BE%E5%AF%B9/id1326730621?l=zh&ls=1&mt=8"
        },
        {
            "id": 2,
            "img": "mobile_img/img(1).png",
            "title": "伊洛纳 (elona) ",
            "describe": "这是一款高自由度与高难度并存的游戏！你将进入一个开放的世界，你可能会在一开始感到不知所措，这里有各…",
            "androidHref":"https://elonadl.leiting.com/full/elona_0109.apk",
            "iosHref":"https://apps.apple.com/cn/app/id1444836753"
        }
    ]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/mobile_css.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/rem.js"></script>
</head>
<body>
    <div class="m_main">
        <img class="m_gameBanner" src="mobile_img/m_game_banner.png" alt="">
        <div class="m_cont">
            <p class="m_contTitle">热门排行榜</p>
        </div>
    </div>
    <script>
        $(function(){
            $.ajax({
            //请求方式为get
            type:"GET",
            //json文件位置
            url:"/test.json",
            //返回数据格式为json
            dataType: "json",
            //请求成功完成后要执行的方法
            success: function(data){
                //使用$.each方法遍历返回的数据date,插入到class为.m_cont中
                var str="<div class='m_contList'>";
                $.each(data.list,function(i,n){
                str+="<dl>" +
                        "<dt>"+
                            "<p class='m_ranking'>"+n.id+"</p>"+
                            "<img src="+n.img+">"+
                        "</dt>"+
                        "<div class='m_dd_float'>"+
                            "<dd class='m_dd_title'>"+n.title+"</dd>"+
                            "<dd class='m_dd_description'>"+n.describe+"</dd>"+
                            "<div class='m_btn'>"+
                                "<a href="+n.androidHref+">"+
                                    "<p class='m_btnAnd'>安卓下载</p>"+
                                "</a>"+
                                "<a href="+n.iosHref+">"+
                                    "<p class='m_btnIos'>苹果下载</p>"+
                                "</a>"+
                                "<div class='clear_both'>"+"</div>"+
                            "</div>"+
                        "</div>"+
                        "<div class='clear_both'>"+"</div>"+
                    "</dl>"
                })
                str+="</div>";
                $(".m_cont").append(str);
            },
            error: function(err){
                alert("错误")
            }
            });
        })
    </script>
</body>
</html>

金翅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq ajax简单使用方法

json{ "list": [ { "id": 1, "img": "mobile_img/img.png", "title": "香肠派对", "describe": "v8.66版本S4赛季“疯狂实验室”上线，彩虹岛突现水晶矿脉，全新点位“实验室”从天外飞来，香肠派…",...
复制链接

扫一扫

专栏目录