day31_JSON _AJAX
json&ajax
回顾
1. jq概述
是一款基于js的轻量级框架
2. jq基础语法
html中引入jq
jq与js的不同
js——》jq
$(js对象)
jq--》js
jq对象[索引]
页面加载事件
js：只能定义一次
jq：可以定义多次
3. jq选择器
基本：标签、class、id
层级：后代、并集、父子
属性：input[属性名="属性值"][]
过滤选择器：
:first
:last
:even
:odd
:eq(index)
jq遍历
jq对象.each(function(index,element){})
4. jq的dom操作
操作内容：text()、html()
操作属性：attr()、val()、prop()
操作样式：
1）jq对象.css();
2）jq对象.addClass() | jq对象.removeClass()
操作元素（标签）
$(标签)
jq对象.prepend(孩子)
jq对象.append(孩子)
jq对象.empty()
jq对象.remove()
5. jq事件
jq对象.click(function(){})
6. 综合案例
今日内容
1. json【今天掌握】
2. ajax【web、项目一、项目二】
JSON
JSON概述
java对象表示形式
User user = new User();
user.setUsername("xxx");
user.setAge(23);
JavaScript对象表示形式
let user= {"username":"xxx", "age":23, "sex": "男"};
JSON是对数据通用格式的载体, 比 XML 更快捷高效和更易于解析. 通过http协议传输数据格式都为字符串
JSON, XML的作用是作为数据的载体, 在网络中传输
JSON基础语法
JSON 语法规则
数据:{属性:值,属性:值}
键值:键值之间是冒号,属性值与属性值之间是逗号
对象:用{}表示
数组:用[]表示
JSON对象使用中常见的具体形式
-
对象类型
格式 {属性:值,属性:值} -
数组/集合类型
格式 [值1,值2,值3]
- 混合类型
对象中属性的值是数组
{属性:[值1,值2,值3],属性:[值1,值2,值3]}
数组中的值是对象
[{属性:值,属性:值},{属性:值,属性:值}]
<script>
//普通用户对象
let user = {"Username":"张三丰", "sex": "男" , "age":103}
alert(user.Username + " " + user.sex + " " + user.age);
//数组存储对象
let array = [
{"Username": "张三丰", "sex": "男", "age": 103},
{"Username":"张无忌", "sex": "男" , "age":22},
{"Username":"张翠山", "sex": "男" , "age":1}
];
for (let object of array) {
console.log(object.Username+object.age+object.sex);
}
//混合
let weiXiaoBao ={
"age":18,
"list":[
{"name":"双儿","address":"扬州"},{"name":"皇后","address":"岛国"}
],
"shifu":{"name":"陈浩南"}
};
console.log(weiXiaoBao.age);
let list = weiXiaoBao.list;
for (let listElement of list) {
console.log(listElement.name + " " + listElement.address);
}
let shi = weiXiaoBao.shifu;
console.log(shi.name);
</script>
JSON格式转换
JSON对象与字符串转换的相关函数
1. JSON.stringify(object) 把对象转为字符串
2. JSON.parse(string) 把字符串转为对象
<script>
let userStr =' {"Username":"张三丰", "sex": "男" , "age":103}';
alert(userStr);
//需要将字符串转为json对象
let user = JSON.parse(userStr);
alert(user);
//提供将对象转为字符串的函数
alert(JSON.stringify(user));
</script>
AJAX
AJAX概述
无需加载整个页面的情况下, 可以加载部分内容, 提高体验. 如 百度搜索框提示, 如京东首页下拉会出现更多图片
应用场景
- 搜索框提示
- 表单数据验证
- 无刷新分页
JS原生AJAX[原生方式开发中不用]
java -jar ajax_server.jar 这个命令是来运行jar包的
1) 运行一个java的服务器
1586572071555
2) 测试一下服务器
1586572166420
http://localhost:8080/check?username=123
3) 案例
1586572360849
4) 代码了解
-
代码步骤
1. 创建ajax对象 let xhr = new XMLHttpRequest(); 2. 告诉ajax的请求方式和请求地址 xhr. open (请求方式, 请求地址); 3. 通过ajax发送请求 xhr. send(); 4. 获取服务器返回的数据 xhr. onload = function(){ xhr.responseText; }
当服务器返回结果时, 会出发ajax的一个时间, 就是 xhr.onload事件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-js的原生ajax</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"> <span id="userwarn"></span>
<script>
document.getElementById('username').onblur=function () {
console.log(this.value);
// 1.创建ajax对象
let xhr = new XMLHttpRequest();
// 2.告诉ajax请求方式和请求地址
xhr.open('get','http://localhost:8080/check?username='+this.value)
// 3.发送请求
xhr.send();
// 4.获取服务器返回数据
xhr.onload=function () {
console.log(xhr.responseText);// 返回的字符串
document.getElementById('userwarn').innerText=xhr.responseText;
}
}
</script>
</body>
</html>
JQuery的Ajax的插件[重要]
相当于是JQuery 对原生ajax的代码进行了封装,封装成了一个函数
ajax函数(最基本的)
- 语法:
$.ajax({json对象格式})
- 参数:
url: 请求地址
type: 请求方式 (get: 不安全有限制大小, post: 安全无限制大小)
data: 请求参数
success: 请求成功时会执行的回调函数
error: 请求失败时, 会执行的回调函数
dataType: 预期服务器返回的数据类型 如 dataType:"json", ajax会帮助把标准json字符串转为json对象
- ajax默认是异步的, 也可以自己设置为同步的, 这种不推荐
- 代码演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-jq的ajax函数</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"><span id="userwarn"></span>
<script>
// 给文本框绑定失去焦点事件
$('#username').blur(function () {
// 使用ajax函数发送请求
$.ajax({
url:"http://localhost:8080/check",
type:"post",
data:"username="+$(this).val(),
success:function (resp) {
// 实现局部刷新
$('#userwarn').text(resp);
},
error:function () {
alert('服务器繁忙，请稍后重试...')
},
// dataType:"json" // 相当于把 json字符串 转为了json对象
})
})
</script>
</body>
</html>
get函数(ajax的get方式的简化)
- 语法:
$.get(url, callback) 这里的url 需要拼接请求参数
-
参数
url: 请求地址
callback: 请求成功的回调函数
-
代码演示
<!DOCTYPE html> <html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-jq的get函数</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名"><span id="userwarn"></span>
<script>
// 给文本框绑定失去焦点事件
(this).val();
('#userwarn').text(resp);
});
})
</script>
</body>
</html>
#### post函数(ajax的post简化形式)
- 语法
$.post(url, data, success)
- 参数
url: 请求地址
data: 请求的参数
success: 请求成功的回调函数
- 代码演示
```html
<!DOCTYPE html>
同步和异步
使用ajax发送的是异步请求
同步: 客户端发送请求后, 必须等待服务器的响应, 在等待期间客户端无法做任何事情
异步: 客户端发送请求后，不需要等待服务器端的响应。在服务器处理的过程中，客户端可以进行其他的操作。
同步和异步区别
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05-同步和异步</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text">
<button id="btn">发送ajax</button>
<script>
// 给按钮绑定点击事件
$('#btn').click(function () {
// 使用ajax函数发送请求，ajax默认的是异步提交，可以改为同步（了解）
$.ajax({
url:'http://localhost:8080/sleep',
type:'get',
success:function (resp) {
alert(resp)
},
async:false// 同步提交
})
})
</script>
</body>
</html>
搜索案例
- 服务器地址
http://localhost:8080/search?keyword=j
- 代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>传智搜索</title>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<style type="text/css">
.content {
width: 643px;
margin: 200px auto;
text-align: center;
}
input[type='text'] {
width: 530px;
height: 40px;
font-size: 14px;
}
input[type='button'] {
width: 100px;
height: 46px;
background: #38f;
border: 0;
color: #fff;
font-size: 15px
}
.show {
position: absolute;
width: 535px;
height: 100px;
border: 1px solid #999;
border-top: 0;
}
</style>
</head>
<body>
<div class="content">
<img alt="" src="../img/logo.png"><br/><br/>
<input type="text" id="search" name="keyword">
<input type="button" value="搜索一下">
<div class="show" style="display: none"></div>
</div>
<script>
// 1.搜索框绑定键盘弹起事件
$('#search').keyup(function () {
// 显示div
$('.show').show();
// 2.获取用户输入的值
console.log($(this).val());
// 判断用户输入的值，小坑 js提供trim()方法
if (this.value.trim().length == 0) {
return;// 拦截代码，不在向下执行
}
// 3.使用post函数发送请求
let url='http://localhost:8080/search';
let data = 'keyword='+$(this).val();
$.post(url,data,function (resp) {
// 清空上次搜索的内容
$('.show').empty();
// 4.局部更新
console.log(resp);
for (let ele of resp) {
$('.show').append(`<div style="cursor: pointer; text-align: left;padding-left: 5px" onmouseover="gaoliang(this)" onmouseout="huifu(this)" onclick="set(this)">${ele}</div>`)
}
})
})
// 高亮
function gaoliang(obj) {
$(obj).css('background-color','#f0f0f0');
}
// 恢复
function huifu(obj) {
$(obj).css('background-color','white');
}
// 设置选中的值
function set(obj) {
// alert($(obj).text())
$('#search').val($(obj).text());
// 隐藏div
// $('.show').css('display','none');
$('.show').hide();
}
</script>
</body>
</html>
老师下午总结
1. JSON对象（重点）
* 基本格式：
{name:value, name:value}
* Json数组：
[
{name:value, name:value},
{name:value, name:value},
{name:value, name:value}
]
* 复杂对象：
{
name:value,
list:[{name:value},{name:value}],
user:{name:value}
}
* JSON对象与字符串转换
JSON.stringify(object) 把json对象转为字符串
JSON.parse(string) 把字符串转为json对象
for in 和 for of的区别
for in为索引for,遍历到的是数组或字符串的索引，可以遍历json对象，得到json对象的所有key，即属性名。
for of为增强for，遍历到的是数组的元素值或者字符串的每个字符，不能用于遍历json对象。
遍历字符串：
let str = "java";
//索引for，遍历得到的是数组或字符串的索引
for (let index in str) {
console.log(index); //0 1 2 3
}
//增强for， 遍历得到的是数组的元素值，或者字符串的字符
for (let s of str) {
console.log(s); // j a v a
}
遍历json对象：
let data = {"name":"张三","age":18,"sex":"男"};
//索引for，可以遍历json对象，拿到对象的所有属性名
for (let key in data) {
console.log(key); //得到所有属性名 name age sex
console.log(key+"====="+data[key]);
}
//for of无法遍历json数组
2. 原生Ajax（扩展了解）
XMLHttpRequest对象
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象作用：
- 在不重新加载页面的情况下更新网页。
- 在页面已加载后从服务器请求数据。
- 在页面已加载后从服务器接收数据。
- 在后台向服务器发送数据。
创建XMLHttpRequest对象:
let xmlHttp = new XMLHttpRequest();
XMLHttpRequest方法
1. 打开与服务器的连接:
open(method,url,async)
参数说明：
method: 表示请求方式，GET或POST。
url: 服务器的访问地址,或者资源的访问路径。
async : 是否执行异步请求，true为异步，false为同步。
举例：
xmlHttp.open("GET","data.txt",true);
2. 将请求送往服务器 :
send()
XMLHttpRequest事件
onreadystatechange事件：
当请求对象的准备状态发生改变时，会触发onreadystatechange事件。
发送请求给服务器，这个状态就会发生变化。
服务器响应回来，这个状态也会发生变化
XMLHttpRequest属性
readyState属性
readyState表示请求与服务器之间的状态信息。
每当readyState改变时，onreadystatechange事件就会被触发。
readyState属性可能的值：
| 状态 | 描述 |
|---|---|
| 0 | 请求未初始化（在调用 open() 之前） |
| 1 | 请求已提出（调用 send() 之前） |
| 2 | 请求已发送（这里通常可以从响应得到内容头部） |
| 3 | 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应） |
| 4 | 请求已完成（可以访问服务器响应并使用它） |
status属性
status表示服务器响应结果状态码，常见有以下几个状态：
200 : 表示响应正确，服务器成功返回。
404 : 服务器找不到请求的资源。(通常是url地址错误)
500 : 服务器异常，无法完成请求。（通常是服务端代码报错）
responseText属性
通过responseText属性来取回由服务器返回的数据，数据为文本格式。
//1.创建对象
let xmlHttp = new XMLHttpRequest();
//2.GET方法，异步方式，打开请求
xmlHttp.open("GET","data.txt",true);
//3.发送请求
xmlHttp.send();
//4.监听请求状态改变事件，判断响应是否已完成
xmlHttp.onreadystatechange = function(){
//请求完成，并成功响应
if(xmlHttp.readyState==4 && xmlHttp.status==200) {
//5.从服务器取出响应数据
let data = xmlHttp.responseText;
console.log(data);
}
};
原生GET方式
<script>
let xmlHttp = new XMLHttpRequest();
xmlHttp.open("get","http://localhost:8080/check?username=盲僧",true);
xmlHttp.send();
xmlHttp.onreadystatechange = function () {
console.log(xmlHttp.readyState);
if(xmlHttp.readyState==4 && xmlHttp.status==200){
console.log(xmlHttp.responseText);
}
}
</script>
原生POST方式
<script>
let xmlHttp = new XMLHttpRequest();
xmlHttp.open("post","http://localhost:8080/check",true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("username=盲僧");
xmlHttp.onreadystatechange = function () {
console.log(xmlHttp.readyState);
if(xmlHttp.readyState==4 && xmlHttp.status==200){
console.log(xmlHttp.responseText);
}
}
</script>
3. Jquery的Ajax（重点）
$.ajax({json格式参数});
参数：
url: 请求地址
type：请求方式 ，常用的get和post
data：请求参数
dataType：返回的数据类型，常用的有text、json
success：请求成功时，执行的回调函数
error：请求失败时，执行的回调函数
$.get(url,success);
参数：
url:请求地址，一般包含请求参数的拼接
success：请求成功时的回调函数
$.post(url,data,success);
参数：
url：请求地址
data：请求参数
success：请求成功时的回调函数
扩展案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<!--路径根据资源的位置自行修改-->
<script src="../js/jquery-1.11.1.js"></script>
<script>
//Ajax异步省市联动
//页面加载时加载省份
$(function () {
let data = null;
$.ajax({
url:"../data/citydata.txt", //路径根据资源的位置自行修改
type: "post",
dataType: "json",
success:function (resp) { //resp为请求返回的json格式数据
data = resp;
//console.log(resp);
//遍历json数据，取出省份
for (let p in resp) {
//console.log(p);
//将省份加到省份下拉框中
$("#provinceId").append(`<option value="${p}">${p}</option>`);
}
}
});
//省份下拉框注册内容改变事件
$("#provinceId").change(function () {
//获取选中的省份
let p = $("#provinceId option:selected").val();
//console.log(p);
//根据省份数据获取对应的市的数组
let cityArr = data[p];
//清空下拉框之前的数据
$("#cityId").html('<option value="">----请-选-择-市----</option>');
for (let city of cityArr) {
//添加城市下拉框的城市信息
$("#cityId").append(`<option value="${city}">${city}</option>`);
}
});
});
</script>
</head>
<body>
<select id="provinceId" style="width:150px">
<option value="">----请-选-择-省----</option>
</select>
<select id="cityId" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
</body>
</html>
网友评论