袁磊老师的课，小方的jQuery笔记（五）---json&ajax，老周在边上陪着，真好！

json+ajax

一、复习一下上学期学过的原生：

JSON.stringify():的意思是将 JavaScript对象转换为字符串，从一个对象中解析出字符串
JSON.parse(text):
把一个字符串解析为JavaScript的对象，从服务器端获取的是字符串，那么我们需要把它变成JavaScript对象，这样js才能读取它。
jQuery.getJSON(url，function（）) 从哪个url获取数据，成功之后的函数，这个函数中必须有一个参数，参数是从服务器获取的信息
.load()从服务器获得一个文件
jQuery.post(url) 发送请求
jQuery.get(url) 发送get请求
jQUery.getScript()获得并执行

二、Ajax
基本结构：

$.ajax({
	type: 'POST',
	url: url,
	data: data,   //你给服务器端传送的数据！
	success: success,
	dataType: dataType, //常用的数据类型

});

JSONP（JSON with Padding） 跨域

是json的一中“使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
协议、域名、端口其中一者不同，就不同源
例如 http://www.a.com 和 https://www.a.com 协议不同，不同源，不能同时获取。
协议、域名、端口都相同，或者同一域名不同文件夹下都阔以访问的
若想要跨域获取，则需要用到JSONP

原生的写法怎么跨域：

//JavaScript的链接，必须在function的下面
//服务器端返回值为json格式

function jsonpCallback(result){    }
//result就是从服务端获取的数据
<script src="s.php?callback = jsonCallback"></script>
//JavaScript的链接，必须在function的下面
//服务器端返回值为json格式

ajax实现跨域：在这里插入图片描述

php中操作JSON：

json_encode()
json_decode()

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <ul id="nlist">
    </ul>

    <script src="./jquery-3.3.1.min.js"></script>
   
    <script>
        $(function () {
                $.getJSON("http://api.komavideo.com/news/list",function(rs){
                    // 我们用getJSON方法获取服务端的数据，通过getJson获取的数据可以直接变为json形式
                    // 这个函数中必须有一个参数，参数是从服务器获取的信息
                    console.log(rs)
                    // 解析
                    $.each(rs, function (i, item) { 
                        // 通过each进行循环，也可以通过for进行循环
                    //这是一个jQuery的全局方法,第一个是要解析的东西，第二个函数中的参数i，如果解析的rs是一个简单的json数组，那么i就是前面的数值下标，item就是后面的内容
                    // 更复杂的结构如果i是属性名，item是属性值，不知道的话，打印试试
                        console.log(item.title);
                        console.log(rs[i].title);

                        // 把获取的数据添加到我们的界面上
                        var row=`<li><a href="${item.link}">${item.title}</a></li>`;
                        //这里是两个反引号哦,这里是ES6的语法，反引号是键盘上1左边的那个键子哦
                        // 用ES6这种语法写是最简单的
                        $("#nlist").append(row);
                        // append是在nlist内部的最后边添加
                        // 这样我们从服务器上获取的信息就可以被添加到界面上啦
                     })
                    
            

                })

          })
    </script>
</body>
</html>

ajax获取：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <ul id="nlist">
    </ul>

    <script src="./jquery-3.3.1.min.js"></script>
   
    <script>
        $(function () {
                $.ajax({
                    type:"POST",
                    url:"http://api.komavideo.com/news/list",
                    dataType:"json",
                    data:{ pageSize:10, pageIndex:3},
                    success:function(rs){
                        $.each(rs, function (i, item) { 
                        var row=`<li><a href="${item.link}">${item.title}</a></li>`;
                        $("#nlist").append(row);
                     })
                    }
                })

          })
    </script>
</body>
</html>

一些重点都写在代码中的注释里啦，自己好好看吧~
今天的笔记就到这里啦，贝贝~

袁磊老师的课，小方的jQuery笔记（五）---json&ajax，老周在边上陪着，真好！

猜你喜欢