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>
一些重点都写在代码中的注释里啦,自己好好看吧~
今天的笔记就到这里啦,贝贝~