高级网页设计—“json和ajax”

其他 2019-02-07 20:00:51 阅读次数: 0
版权声明：本文为博主原创文章，转载时请标明出处 https://blog.csdn.net/weixin_41056807/article/details/84947997

json

  • 一种轻量级的数据交换格式。
  • JSON 是 JavaScript 原生格式。
  • JSON 独立于语言 *
  • JSON 具有自我描述性，容易理解
 var people = {
        "programmers": [{
            "firstName": "Brett",
            "lastName": "McLaughlin",
            "email": "aaaa"
        }, {
            "firstName": "Jason",
            "lastName": "Hunter",
            "email": "bbbb"
        }, {
            "firstName": "Elliotte",
            "lastName": "Harold",
            "email": "cccc"
        }]
    };

例：
完成一个成员的json数据表示：每名具体的成员有姓名、年龄、国籍三个属性。成员可以有很多实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json</title>
</head>
<body>
<script>
    var mem=[
        {name:"Yu",age:18,country:"china"},
        {name:"Y",age:8,country:"america"},
        {name:"Yq",age:47,country:"england"}
        ];
    console.log(mem);//Array(3)
    console.log(mem[0].name);//Yu
    console.log(mem[0]);//Object
    console.log(JSON.stringify(mem[0]));//{"name":"Yu","age":18,"country":"china"}对象转换成字符串形式
    //字符串准成对象：parse


    //循环输出
    for (var i=0;i<mem.length;i++){
        console.log(mem[i].name);
    }
    //Yu
    // Y
    // Yq
</script>
</body>
</html>

在这里插入图片描述

json-data（传送数据）

以左图右文为例
之前做的左图右文HTML是：

    <ul class="mlist">
        <li>
            <img src="../image/2.1.jpg" alt="">
            <h3><a href="#">there is a title</a></h3>
            <p>随意的内容</p>
            <span class="time">2018-12-8</span>
        </li>
        <li>
            <img src="../image/2.2.jpg" alt="">
            <h3><a href="#">there is a title</a></h3>
            <p>随意的内容</p>
            <span class="time">2018-12-8</span>
        </li>
        <li>
            <img src="../image/2.3.jpg" alt="">
            <h3><a href="#">there is a title</a></h3>
            <p>随意的内容</p>
            <span class="time">2018-12-8</span>
        </li>
        <li>
            <img src="../image/2.4.jpg" alt="">
            <h3><a href="#">there is a title</a></h3>
            <p>随意的内容</p>
            <span class="time">2018-12-8</span>
        </li>
    </ul>

在这里插入图片描述

现在想用json传数据也就是li内的内容是没有的要通过json传值显示在页面上

  • 标签script要构建json
 {
 	   "img":"../image/2.1.jpg",左边图片
        "h3":"there is a title",上标题
        "link":"http://www.baidu.com",上标题内链接a
        "p":"随意的内容",p标签
        "time":"2018-12-8"}float右浮时间}
  • 多少个li不确定的，所以用for循环。在for循环里写一组li的样式（技巧就是先把HTML原来的li内的样式扒下拉，然后对应的标签进行修改）
  • createElement() 方法通过指定名称创建一个元素var newli=document.createElement("li");
  • innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容;newli.innerHTML=hang;
  • appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。mlist.appendChild(newli);

使用json-传送数据完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json-data</title>
    <!--手机端左图右文-->
    <style>
        ul{
            list-style: none;
        }
        ul,p,h3{
            padding: 0;
            margin: 0;
        }
        img{
            border: none;
            display: block;
        }
        .mlist img{
            float: left;
            width: 100px;
            height: 60px;
            margin-right: 10px;
        }
        .mlist li{
            border-bottom: 1px solid #269abc;
            /*padding-bottom: 8px;*/
            margin-bottom: 8px;
            position: relative;
            height: 65px;
        }
        .mlist h3{
            font-size: 16px;
            line-height: 32px;
        }
        .mlist p{
            font-size: 16px;
            /*line-height: 32px;*/
            color: #999999;
            padding-left: 10px;
            text-indent: 1em;
        }
        a{
            text-decoration: none;
            color: #030;
        }
        .time{
            position: absolute;
            right: 10px;
            bottom: 10px;
            font-size: 12px;
            color: #ccc;
        }
    </style>
</head>
<body>
    <ul class="mlist">
        <!--<li>-->
            <!--<img src="../image/2.1.jpg" alt="">-->
            <!--<h3><a href="#">there is a title</a></h3>-->
            <!--<p>随意的内容</p>-->
            <!--<span class="time">2018-12-8</span>-->
        <!--</li>-->
        <!--<li>-->
            <!--<img src="../image/2.2.jpg" alt="">-->
            <!--<h3><a href="#">there is a title</a></h3>-->
            <!--<p>随意的内容</p>-->
            <!--<span class="time">2018-12-8</span>-->
        <!--</li>-->
        <!--<li>-->
            <!--<img src="../image/2.3.jpg" alt="">-->
            <!--<h3><a href="#">there is a title</a></h3>-->
            <!--<p>随意的内容</p>-->
            <!--<span class="time">2018-12-8</span>-->
        <!--</li>-->
        <!--<li>-->
            <!--<img src="../image/2.4.jpg" alt="">-->
            <!--<h3><a href="#">there is a title</a></h3>-->
            <!--<p>随意的内容</p>-->
            <!--<span class="time">2018-12-8</span>-->
        <!--</li>-->
    </ul>
<script>
    // 构建json
    var data=[
        {"img":"../image/2.1.jpg",
        "h3":"there is a title",
        "link":"http://www.baidu.com",
        "p":"随意的内容",
        "time":"2018-12-8"},
        {"img":"../image/2.2.jpg",
            "h3":"there is a title",
            "link":"http://www.baidu.com",
            "p":"随意的内容",
            "time":"2018-12-8"},
        {"img":"../image/2.3.jpg",
            "h3":"there is a title",
            "link":"http://www.baidu.com",
            "p":"随意的内容",
            "time":"2018-12-8"},
        {"img":"../image/2.4.jpg",
            "h3":"there is a title",
            "link":"http://www.baidu.com",
            "p":"随意的内容",
            "time":"2018-12-8"}
    ];
    // 不固定个数
    var mlist=document.querySelector(".mlist");
    for (var i=0;i<data.length;i++){
        // var hang=` <img src="../image/2.1.jpg" alt="">
        //     <h3><a href="#">there is a title</a></h3>
        //     <p>随意的内容</p>
        //     <span class="time">2018-12-8</span>`;//行数不定
        var hang=` <img src="${data[i].img}" alt="">
            <h3><a href="${data[i].link}">${data[i].h3}</a></h3>
            <p>${data[i].p}</p>
            <span class="time">${data[i].time}</span>`;
        var newli=document.createElement("li");
        newli.innerHTML=hang;
        mlist.appendChild(newli);
    }
</script>
</body>
</html>

在这里插入图片描述

上图下文也可以做出来这个效果（完整代码）


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>json-data-上图下文</title>
    <style>
        ul,p{padding: 0;margin: 0;}
        ul{list-style: none;}
        a{text-decoration: none;}
        a img{border: none;}
        .slist{width: 847px;
            overflow: hidden;
        }
        .slist li{
            float: left;
            width: 200px;
            /*height: 300px;*/
            list-style-type: none;
            margin-top: 10px;
        }
        .slist img{
            width: 180px;
            height: 180px;
            display: block;
            margin: 0 auto;
            border-radius: 10px;
        }
        .slist p{
            margin-left: 10px;
            width: 180px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            font-size: 14px;
            text-align:center;
            background-color: rgba(0,0,0,0.5);

            margin-top: -30px;
            position: relative;
            z-index: 3;
            border-radius: 10px;

        }
        .slist p a{
            color: #fff;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="slist">
    <ul>
        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->

        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="#">-->
                <!--<img src="../image/hd-weather.png" />-->
            <!--</a>-->
            <!--<p><a href="#">这里是文字</a></p>-->
        <!--</li>-->
    </ul>
</div>
<script>
    // 构建json
    var data=[
        { "link":"http://www.baidu.com",
            "img":"../image/flower1.jpg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88"},
        {"link":"http://www.baidu.com",
            "img":"../image/flower2.jpg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88/"},
        {"link":"http://www.baidu.com",
            "img":"../image/flower4.jpeg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88/"},
        {"link":"http://www.baidu.com",
            "img":"../image/flower5.jpg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88/"},
        {"link":"http://www.baidu.com",
            "img":"../image/flower1.jpg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88/"},
        {"link":"http://www.baidu.com",
            "img":"../image/flower2.jpg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88/"},
        {"link":"http://www.baidu.com",
            "img":"../image/flower4.jpeg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88/"},
        {"link":"http://www.baidu.com",
            "img":"../image/flower5.jpg",
            "p":"这里是文字",
            "linknext":"https://gitee.com/alice88/"}
    ];

    var slist=document.querySelector(".slist");
    for (var i=0;i<data.length;i++){

        var hang=`<a href="${data[i].link}"><img src="${data[i].img}" /></a>
            <p><a href="${data[i].linknext}">${data[i].p}</a></p>`;
        var newli=document.createElement("li");
        newli.innerHTML=hang;
        slist.appendChild(newli);
    }
</script>
</body>
</html>

在这里插入图片描述

ajax异步_访问服务器

  • AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

  • AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

    扫描二维码关注公众号，回复： 5152246 查看本文章

  • AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
    先准备一个ajax.txt文件，随便写点东西
    在这里插入图片描述

  • 1.1创建 XMLHttpRequest 对象

  • 1.2XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

  • 1.3variable=new XMLHttpRequest();

  • 2.1向服务器发送请求请求get/post

  • 2.2如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

    xmlhttp.open(“GET”,“ajax_info.txt”,true);
    xmlhttp.send();

  • 2.3xmlhttp.open("GET","ajax.txt",true);

  • 2.4xmlhttp.open("GET","ajax.txt?t="+Math.random(),true);txt?t="+Math.random()清除缓存,随机数是get请求可以，post不可以

  • 2.5xmlhttp.open("POST","ajax.txt",true);

  • 3.1xmlhttp.send();//向服务器发送请求

  • 3.2发送请求get没有参数post可有参数
    完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax异步_访问服务器</title>
    <script>
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();//创建 XMLHttpRequest 对象
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)//成功的效果
                {
                    console.log(xmlhttp.responseText);//读ajax成功之后把ajax.txt放在控制台
                    document.getElementById("box").innerHTML=xmlhttp.responseText;//读ajax成功之后把ajax.txt放的位置。
                }
            };
            // xmlhttp.open("GET","ajax.txt",true);
            // txt?t="+Math.random()清除缓存,随机数是get请求可以，post不可以
            xmlhttp.open("GET","ajax.txt?t="+Math.random(),true);

            // xmlhttp.open("POST","ajax.txt",true);
            xmlhttp.send();//向服务器发送请求
    </script>
</head>
<body>
<div id="box"><h2>使用 AJAX 修改该文本内容</h2></div>
<!--<button type="button" onclick="loadXMLDoc()">修改内容</button>-->

</body>
</html>

在这里插入图片描述

ajax给服务器发送请求—post——表单、json

  • var data={ "name":"yuan", "age":18, "country":"china"};//把数据通过ajax传给服务器端

  • xmlhttp.open("POST","ajax.txt",true);必须post请求

  • xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//说明数据来源表单还是json

  • xmlhttp.send(data);//向服务器发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax给服务器发送请求—post——表单、json、</title>
    <script>
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)//成功的效果
            {
                console.log(xmlhttp.responseText);//读ajax成功之后把ajax.txt放的位置。
                document.getElementById("box").innerHTML=xmlhttp.responseText;//读ajax成功之后把ajax.txt放的位置。
            }
        };
        var data={
            "name":"yuan",
            "age":18,
            "country":"china"};//把数据通过ajax传给服务器端
        xmlhttp.open("POST","ajax.txt",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//说明数据来源表单还是json
        xmlhttp.send(data);//向服务器发送请求
    </script>
</head>
<body>
<div id="box"><h2>使用 AJAX 修改该文本内容</h2></div>
</body>
</html>

完成任何一个现实网页部分 数据在json或TXT文件中保存

还是以左图右文为例

新建ajax.json文件存储json数据
在这里插入图片描述

通过bejson进行在线解析
在这里插入图片描述

  • var data=JSON.parse(xmlhttp.responseText);//字符串变json对象这个很重要！！！！
  • xmlhttp.open("GET","ajax.json?t="+Math.random(),true);
  • xmlhttp.send();//向服务器发送请求
    完整json代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完成任何一个现实网页部分 数据在json或TXT文件中保存</title>
    <style>
        ul{
            list-style: none;
        }
        ul,p,h3{
            padding: 0;
            margin: 0;
        }
        img{
            border: none;
            display: block;
        }
        .mlist img{
            float: left;
            width: 100px;
            height: 60px;
            margin-right: 10px;
        }
        .mlist li{
            border-bottom: 1px solid #269abc;
            /*padding-bottom: 8px;*/
            margin-bottom: 8px;
            position: relative;
            height: 65px;
        }
        .mlist h3{
            font-size: 16px;
            line-height: 32px;
        }
        .mlist p{
            font-size: 16px;
            /*line-height: 32px;*/
            color: #999999;
            padding-left: 10px;
            text-indent: 1em;
        }
        a{
            text-decoration: none;
            color: #030;
        }
        .time{
            position: absolute;
            right: 10px;
            bottom: 10px;
            font-size: 12px;
            color: #ccc;
        }
    </style>
    <script>
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)//成功的效果
                {
                    // console.log(xmlhttp.responseText);//读ajax成功之后把ajax.txt放的位置。
                    // document.getElementById("box").innerHTML=xmlhttp.responseText;//读ajax成功之后把ajax.txt放的位置。

                    var data=JSON.parse(xmlhttp.responseText);//字符串变json对象

                    var mlist=document.querySelector(".mlist");
                    for (var i=0;i<data.length;i++){
                        var hang=` <img src="${data[i].img}" alt="">
                        <h3><a href="${data[i].link}">${data[i].h3}</a></h3>
                        <p>${data[i].p}</p>
                        <span class="time">${data[i].time}</span>`;
                        var newli=document.createElement("li");
                        newli.innerHTML=hang;
                        mlist.appendChild(newli);
                    }
                }
            };
            // xmlhttp.open("GET","ajax.txt",true);
            // txt?t="+Math.random()清除缓存,随机数是get请求可以，post不可以
            xmlhttp.open("GET","ajax.json?t="+Math.random(),true);

            // xmlhttp.open("POST","ajax.txt",true);
            xmlhttp.send();//向服务器发送请求
    </script>
</head>
<body>
<ul class="mlist">
    <!--<li>-->
    <!--<img src="../image/2.1.jpg" alt="">-->
    <!--<h3><a href="#">there is a title</a></h3>-->
    <!--<p>随意的内容</p>-->
    <!--<span class="time">2018-12-8</span>-->
    <!--</li>-->
    <!--<li>-->
    <!--<img src="../image/2.2.jpg" alt="">-->
    <!--<h3><a href="#">there is a title</a></h3>-->
    <!--<p>随意的内容</p>-->
    <!--<span class="time">2018-12-8</span>-->
    <!--</li>-->
    <!--<li>-->
    <!--<img src="../image/2.3.jpg" alt="">-->
    <!--<h3><a href="#">there is a title</a></h3>-->
    <!--<p>随意的内容</p>-->
    <!--<span class="time">2018-12-8</span>-->
    <!--</li>-->
    <!--<li>-->
    <!--<img src="../image/2.4.jpg" alt="">-->
    <!--<h3><a href="#">there is a title</a></h3>-->
    <!--<p>随意的内容</p>-->
    <!--<span class="time">2018-12-8</span>-->
    <!--</li>-->
</ul>


</body>
</html>

在这里插入图片描述
ajax.json文件内容

[
  {"img":"../image/2.1.jpg",
    "h3":"there is a title",
    "link":"http://www.baidu.com",
    "p":"你好明天！",
    "time":"2018-12-8"},
  {"img":"../image/2.2.jpg",
    "h3":"there is a title",
    "link":"http://www.baidu.com",
    "p":"随意的内容",
    "time":"2018-12-8"},
  {"img":"../image/2.3.jpg",
    "h3":"there is a title",
    "link":"http://www.baidu.com",
    "p":"随意的内容",
    "time":"2018-12-8"},
  {"img":"../image/2.4.jpg",
    "h3":"there is a title",
    "link":"http://www.baidu.com",
    "p":"随意的内容",
    "time":"2018-12-8"}
]

效果：
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_41056807/article/details/84947997
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022