《AJAX-笔记》
共性问题
作业1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
请输入城市:<input type="text" id="id"/>
<br/><br/>
城市复选框:
<div style="width:200px;background:red;">
<input type="checkbox" name="love" value="北京"/>北京
<input type="checkbox" name="love" value="南京"/>南京
<input type="checkbox" name="love" value="上海"/>上海
</div>
<script type="text/javascript">
$("#id").blur(function () {
//得到文本框中变量的值
let cityValue = $("#id").val();
//选中一个复选框,通过属性选择器。单引号可以省略
$("input[value='" + cityValue + "']").prop("checked",true)
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏和显示</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" value="显示" id="b1">
<input type="button" value="隐藏" id="b2">
<hr/>
<!--
显示和隐藏图片,有一个css样式:
display:
1. none 隐藏
2. block 设置成块级元素显示
3. inline 设置成内联元素显示
jQuery有方法直接可以实现:
show(毫秒) 显示,可以指定时间,单位是毫秒
hide(毫秒) 隐藏
fadeIn() / fadeOut() 淡入淡出
slideDown() / slideUp() 下滑和上滑
-->
<img src="img/adv1.jpg" id="girl"/>
<script type="text/javascript">
$("#b1").click(function () {
//修改样式display为none
//$("#girl").css("display", "block");
$("#girl").slideDown(2000);
})
//第2个按钮点击隐藏
$("#b2").click(function () {
//修改样式display为none
//$("#girl").css("display", "none");
$("#girl").slideUp(2000);
})
</script>
</body>
</html>
回顾
- 基本选择器
基本选择器 | 语法 |
---|---|
标签选择器 | 标签名 |
类选择器 | .类名 |
id选择器 | #ID |
- 层级选择器
层级选择器 | 语法 |
---|---|
获得A元素内部的所有的B元素 | A B |
获得A元素下面的所有B子元素 | A>B |
获得A元素同级,下一个B元素 | A+B |
获取A元素同级后面所有的B兄弟元素 | A~B |
- JS与JQ对象的转换
操作 | 方法 |
---|---|
将JS对象–>jQuery对象 | $(JS对象) |
将jQuery对象–> JS对象 | JQ对象[0]或JQ对象.get(0) |
- jQuery对DOM的操作的方法
jQuery中的方法 | 作用 |
---|---|
html() | innerHTML |
text() | innerText |
val() | value |
attr() | 操作属性 |
prop() | 操作属性,用于布尔类型值 |
addClass() | 添加类样式 |
css() | 修改行内样式 |
$(标签全部内容) | 创建元素 |
append() | 追加到最后一个子元素 |
prepend() | 添加到第一个子元素 |
before() | 加到当前元素的前面 |
after() | 加到当前元素的后面 |
remove() | 删除自己 |
empty() | 清空所有的子元素 |
学习目标
- 能够使用jQuery的事件绑定与解绑方法
- 能够使用jQuery的遍历方法(2个)
- 能够理解异步的概念
- 能够了解原生js的ajax
- 能够使用jQuery的$.get() $.post() $.ajax()方法
- 能够完成自动补全的案例
学习内容
动态绑定事件:绑定(on)与解绑(off)
目标
学习事件的动态绑定与解绑
什么是事件绑定
在JS代码执行过程中,让某些元素绑定一些事件,这时这个元素就可以激活这些事件。也可以在执行过程中解绑一些事件,这个元素就失去了这些事件的激活能力。
绑定与解绑语法
事件绑定语法 | 说明 |
---|---|
JQ对象.on(“事件名”, 处理函数) | 作用:给JQ对象动态绑定一个事件 参数1:要绑定的事件名,如:"click" 参数2:通常使用匿名函数,如:function() { } |
事件解绑语法 | 说明 |
---|---|
JQ对象.off(“事件名1 事件名2”) | 解绑一个或多个事件,事件名通过空格隔开 |
JQ对象.off() | 解绑所有的事件 |
示例:绑定事件
需求
有四个按钮,b1按钮使用以前的事件写法,点击弹出信息。b2按钮没有事件。b3按钮点击给b2按钮绑定点击事件。然后点击b2,查看输出的信息。b4按钮点击解除b2按钮的点击事件。
效果
![1563197414736](assets/1563197414736.png)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态绑定和解绑</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
#content {
border: 2px solid gray;
width: 650px;
height: 528px;
}
</style>
</head>
<body>
<input type="button" value="绑定" id="b1">
<input type="button" value="解绑" id="b2">
<hr/>
<div id="content">
<img src="img/adv1.jpg" id="girl"/>
</div>
<script type="text/javascript">
//b1按钮的点击事件
$("#b1").click(function () {
//给div绑定鼠标移上的事件
$("#content").on({
"mouseover": function () {
$("#girl").hide();
},
"mouseout": function () {
$("#girl").show();
}
})
});
//b2按钮点击事件
$("#b2").click(function () {
//解绑所有的事件
$("#content").off();
})
</script>
</body>
</html>
小结
绑定:
JQ对象.on({
"事件名":处理函数,
"事件名":处理函数
})
解绑:
JQ对象.off();
JQ对象.off("事件名 事件名")
jQuery循环遍历的几种方式
目标
- jQuery对象遍历的2种方式
- ES6中遍历集合的循环
JQ遍历的两种方式
JQ对象.each(function(index,element))
JQ对象就是要遍历的集合或数组
index: 表示当前遍历的索引号,从0开始
element:表示当前的元素
$.each(数组或集合, function(index,element))
第一个参数是要遍历的数组或集合
index: 表示当前遍历的索引号,从0开始
element:表示当前的元素
for(let 变量名 of 数组或集合)
注:无论使用上面哪些方式进行遍历,数组中每个元素都是JS对象
遍历的示例
需求
对一个select中的所有option元素进行遍历,并且输出它的HTML内容
效果
![1569586922787](assets/1569586922787.png)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历元素</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<select name="city" id="city">
<option>广州</option>
<option>深圳</option>
<option>东莞</option>
</select>
<input type="button" id="b1" value="对象方法的遍历"/>
<input type="button" id="b2" value="全局方法的遍历"/>
<input type="button" id="b3" value="for-of方法遍历"/>
<script type="text/javascript">
/*
JQ对象.each(function(index,element))
JQ对象就是要遍历的集合或数组
index: 表示当前遍历的索引号,从0开始
element:表示当前的元素
$.each(数组或集合, function(index,element))
第一个参数是要遍历的数组或集合
index: 表示当前遍历的索引号,从0开始
element:表示当前的元素
for(let 变量名 of 数组或集合)
注:无论使用上面哪些方式进行遍历,数组中每个元素都是JS对象
*/
//得到所有的option元素
let options = $("option"); //JQ对象,这是一个数组
//使用对象方法
$("#b1").click(function () {
options.each(function (index, element) {
alert("索引:" + index + ", 元素:" + element.innerText); //因为element是js对象
});
});
//使用全局方法
$("#b2").click(function () {
$.each(options, function (index, element) {
alert("索引:" + index + ", 元素:" + $(element).text()); //调用JQ的方法
})
});
//这是ES6中新增的方法
$("#b3").click(function () {
for(let op of options) { //options是一个数组
alert("元素:" + op.innerText);
}
});
</script>
</body>
</html>
小结
jQuery遍历的三种方式 |
---|
JQ对象.each(function(index, element)) |
$.each(数组或集合, function(index, element)) |
for (let 变量名 of 数组或集合) |
AJAX的概述
目标
- 什么是AJAX
- 它的作用是什么
什么是ajax
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dClhujQ7-1593429872820)(assets/1553212487038.png)]
概念:Asynchronous JavaScript And XML 异步的JavaScript和XML
-
异步
-
JavaScript
-
XML
同步和异步的区别
-
同步方式:正常情况下,浏览器与服务器之间是串行操作,类似于一个Java线程的操作。
-
异步方式:浏览器与服务器是并行操作,类似于Java中多个线路同时工作。
即浏览器后台发送数据给服务器,不是通过表单去提交数据给服务器。
用户在前台还是可以继续工作,用户感觉不到浏览器已经将数据发送给了服务器,并且服务器也已经返回了数据。
ajax使用的技术
- JavaScript:用于后台发送数据给服务器,并且对服务器返回的结果进行处理
- XML:用于接收服务器返回的数据,但是已经被JSON格式代替。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zdPGM8L2-1593429872830)(assets/1553213029597.png)]
AJAX的应用场景
检查用户名是否已经被注册
很多站点的注册页面都具备自动检测用户名是否存在的友好提示,该功能整体页面并没有刷新,但仍然可以异步与服务器端进行数据交换,查询用户的输入的用户名是否在数据库中已经存在。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-97aKkmLY-1593429872836)(assets/1553212896200.png)]
省市下拉框联动
很多站点都存在输入用户地址的操作,在完成地址输入时,用户所在的省份是下拉框,当选择不同的省份时会出现不同的市区的选择,这就是最常见的省市联动效果。
![1553213415813](assets/1553213415813.png)
内容自动补全
小结
-
AJAX的全称:异步的JavaScript和XML,用于后台访问服务器
-
JavaScript作用:后台发送数据给服务器,并且接收服务器返回的数据
-
XML的作用:用来接收服务器的大量的数据,但是已经被JSON代替
-
什么是异步请求?浏览器与服务器是并行工作的。
原生AJAX访问流程
目标
- 了解原生的ajax访问服务器的整个流程
- 核心对象XMLHttpRequest对象
流程说明:
- 用户在浏览器端由JS创建一个对象XMLHttpRequest对象
- 这个对象是ajax的核心对象,由它发送请求给服务器
- 将请求的数据发送到服务器
- 在服务器处理数据,从数据库中查询用户是否存在,通过XML(JSON)把数据返回
- 在回调函数中得到服务器返回的数据,使用HTML和CSS更新页面的信息
小结
-
什么是原生的ajax?
不使用任何框架来编写ajax
-
它的核心对象是?
XMLHtttpRequest对象
XMLHttpRequest对象(了解)
目标
学习XMLHttpRequest对象有哪些事件,方法和属性
语法
创建XMLHttpRequest对象 | 说明 |
---|---|
new XMLHttpRequest() | 创建核心对象 |
XMLHttpRequest对象的事件 | 说明 |
---|---|
onreadystatechange | on ready state change 准备状态发生改变的事件 如果服务器返回了数据,并且浏览器接收到了数据就激活 |
XMLHttpRequest对象的属性 | 说明 |
---|---|
readyState | 通过这个属性获取准备状态: 0 正在初始化 1 浏览器开始发送数据给服务器 2 服务器接收数据完毕 3 服务器开始响应数据 4 服务器的数据发送完毕 |
status | 服务器状态码,200表示服务器正常响应 结论:如果准备状态是4,而且状态码是200 表示服务器正常的响应并且发回了数据 |
responseText | 接收服务器返回的字符串数据,如果要做为其它类型使用,必须进行类型转换 |
XMLHttpRequest对象的方法 | 说明 |
---|---|
open(“GET”,“URL”,true) | 打开服务器端连接 参数1:GET方法或POST方法发送数据 参数2:服务器的访问地址 参数3:true表示异步,false表示同步 |
send() | 后台发送数据给服务器 |
小结
- 创建这个对象:new XMLHttpRequest
- 事件:onreadystatechange
- 属性:readyState status responseText
- 方法:open(“GET”, 地址, true) send()
案例:原生的AJAX判断用户名是否存在
目标
了解原生的ajax如何去实现这个案例
需求
用户注册时输入一个用户名,失去焦点以后,通过ajax后台判断用户名是否存在。服务器先不访问数据库,直接判断用户名,如果用户名为newboy,则表示用户已经存在,否则用户名可以注册使用。
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uQ01CKZi-1593429872847)(assets/1544836305809.png)]
服务器端
准备数据文件 users.json
[
"Newboy",
"Jack",
"Rose",
"Tom",
"Lina"
]
客户端
步骤
- 文本框失去焦点,得到文本框中的姓名
- 创建 XMLHttpRequest 请求对象
- 设置请求的 URL
- 调用 open 方法,设置提交给服务器的请求方式和访问地址
- 调用 send 方法发送请求
- 设置请求对象的 onreadystatechange 事件,即"准备状态改变"事件。
a) 当 readyState 等于 4,并且服务器 status 响应码为 200 则表示响应成功
b) 通过 responseText 得到响应的字符串,服务器返回的是一个字符串数组。
c) 转成 JSON 数组,再与文本框中输出的值进行比较,如果存在就设置为 true,否则设置为 false。
d) 如果是 true,则表示用户存在,在后面的 span 显示"用户名已经存在"
e) 否则表示不存在,在后面的 span 中显示"恭喜你,可以注册"。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户是否存在</title>
</head>
<body>
用户名:<input type="text" id="user"> <span id="info"></span>
<script type="text/javascript">
/*用户注册时输入一个用户名,失去焦点以后,通过ajax后台判断用户名是否存在。
服务器先不访问数据库,直接判断用户名,如果用户名为newboy,则表示用户已经存在,否则用户名可以注册使用。 */
//用户名的改变事件
document.getElementById("user").onchange = function () {
//创建XMLHttpRequest对象
let request = new XMLHttpRequest();
//打开服务器的连接,参数:GET或POST,服务器地址,true
request.open("GET", "json/users.json", true);
//发送请求给服务器
request.send();
//设置回调函数,准备状态发生改变时激活这个函数
request.onreadystatechange = function () {
//准备状态等于4,服务器状态码等于200
if (request.readyState == 4 && request.status == 200) {
//接收服务器返回的数据
let text = request.responseText; //字符串
//将字符串转成JSON
let users = JSON.parse(text); //所有用户的数组
//得到用户在文本框中输入的数据
let user = document.getElementById("user").value;
//设置标记
let exists = false;
//遍历服务器返回的数组
for (let u of users) {
if (u == user) { //当前元素等于输入的用户名
exists = true; //修改标记
break;
}
}
//判断标记
if (exists) { //用户名已经存在
document.getElementById("info").innerText = "用户名已经存在";
}
else { //不存在
document.getElementById("info").innerText = "恭喜,可以注册";
}
}
}
}
</script>
</body>
</html>
3.0以前的$.get()和$.post()方法的使用
目标
传统$.get()方法的介绍
与ajax操作相关的jQuery方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X2RqkTdD-1593429872852)(assets/1553214556977.png)]
演示案例
步骤
- 导入jQuery框架的js文件
- 编写文本框失去焦点blur()事件
- 得到文本框中的姓名
- 使用$.get方法发送请求给服务器,回调函数的参数就是返回的用户数组
- 根据返回的结果,在回调函数中判断用户是否存在,如果存在返回true,否则返回false
- 判断是true或false,然后在span中显示相应的信息
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户是否存在</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
用户名:<input type="text" id="user"> <span id="info"></span>
<script type="text/javascript">
/*
用户注册时输入一个用户名,失去焦点以后,通过ajax后台判断用户名是否存在。
服务器先不访问数据库,直接判断用户名,如果用户名为newboy,则表示用户已经存在,否则用户名可以注册使用。
$.get(url,data,callback,type) $.post(url,data,callback,type)
只有第1个是必须的选项
1. url: 表示请求服务器地址
2. data: 发送给服务器的数据
格式1:键1=值2&键2=值2
格式2:{键:值,键:值}
3. callback:回调函数,参数是服务器返回的数据
4. type:从服务器返回的数据类型,默认是字符串类型
取值:xml, html, script, json, text
*/
//用户名的改变事件
$("#user").change(function () {
//访问服务器获取数据,参数是服务器返回的数据,返回的类型是json格式
$.get("json/users.json", function (users) {
//判断用户名是否存在
let user = $("#user").val(); //得到文本框的值
//1.设置标记
let exists = false;
//2.遍历数组,查找名字是否存在
for (let u of users) {
if (u == user) {
exists = true; //找到
break;
}
}
//3.根据查找的结果显示信息
if (exists) { //用户存在
$("#info").text("用户名已经存在");
}
else {
$("#info").text("恭喜可以注册");
}
},"json");
});
</script>
</body>
</html>
小结
G E T 或 GET或 GET或POST参数 | 解释 |
---|---|
url | 服务器访问地址 |
data | 发送给服务器的数据,2种格式: 1. 键=值&键=值 2. {键:值, 键:值} |
callback | 回调函数,回调函数的参数就是服务器返回的数据 |
type | 指定服务器返回的数据类型 |
jQuery中$.ajax()方法的使用
目标
-
$.ajax()方法的使用
-
案例:使用ajax实现后台用户登录功能
语法
settings是一个JSON形式的对象,格式是{name:value,name:value… …},常用的name属性名如下:
$.ajax({键:值,键:值}) 属性名称 | 解释 |
---|---|
url | 服务器访问地址 |
async | 默认是异步,取值是true,设置为false表示同步 |
method | GET或POST方法 |
data | 发送给服务器的数据,2种格式: 1. 键=值&键=值 2. {键:值, 键:值} |
dataType | 服务器返回的数据类型 取值:xml, html, script, json, text |
success | 服务器正常响应的回调函数,参数就是服务器返回的数据 |
error | 服务器出现异常的回调函数,参数是XMLHttpRequest对象 |
案例:使用AJAX实现后台用户登录的功能
需求
- 页面上有用户名和密码两个文本框,点登录按钮,使用后台AJAX完成登录成功。
- 如果用户登录成功显示登录成功,否则显示登录失败。
- 后台服务器暂不使用数据库,如果用户名为:newboy,密码为:123,则登录成功。
服务器
准备文件:login.json
[
{
"id": 1,
"name": "NewBoy",
"password": "123"
},
{
"id": 2,
"name": "Jack",
"password": "456"
},
{
"id": 3,
"name": "Rose",
"password": "789"
}
]
客户端
步骤
- 页面代码如下:login.html,页面上有一个登录的表单数据。注:登录按钮是一个普通的button
- 给登录按钮添加点击事件
- 使用$.ajax方法访问服务器
- 设置url请求地址,success成功的回调函数
- 在回调函数中遍历整个集合,比较每个用户名和密码是否与输入的用户名和密码相同
- 如果有相同的,返回true,否则返回false
- 如果为true,输出登录成功,否则输出登录失败
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password"/></td>
</tr>
<tr>
<!--登录按钮是一个普通按钮-->
<td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/></td>
</tr>
</table>
</form>
<script type="text/javascript">
/*
$.ajax({键:值,键:值})
url : 服务器访问地址
async :默认是异步,取值是true,设置为false表示同步
method: GET或POST方法,默认是get方法
data : 发送给服务器的数据,2种格式:1. 键=值&键=值 2. {键:值, 键:值}
dataType : 服务器返回的数据类型<br />取值:xml, html, script, json, text
success : 服务器正常响应的回调函数,参数就是服务器返回的数据
error : 服务器出现异常的回调函数,参数是XMLHttpRequest对象
*/
//登录按钮的点击事件
$("#btnLogin").click(function () {
//1.获取用户输入的用户名和密码
let username = $("#username").val();
let password = $("#password").val();
//2.使用$.ajax访问服务器
$.ajax({
url: "json/login.json",
//服务器正常响应的回调函数,参数就是返回的用户数据
success: function (users) {
let exists = false;
//遍历数组中每个用户
for (let user of users) {
//比较用户名和密码是否相同
if (user.name == username && user.password == password) {
exists = true;
break;
}
}
//输出登录成功或失败
if (exists) {
alert("登录成功,欢迎您:" + username);
}
else {
alert("登录失败,请重试");
}
},
dataType: "json" //指定返回数据类型是json
})
});
</script>
</body>
</html>
其它参数的演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password"/></td>
</tr>
<tr>
<!--登录按钮是一个普通按钮-->
<td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/></td>
</tr>
</table>
</form>
<script type="text/javascript">
/*
$.ajax({键:值,键:值})
url : 服务器访问地址
async :默认是异步,取值是true,设置为false表示同步
异步:不会等服务器处理完,会一直向后执行
同步:等服务器处理完毕,才执行后面的JS代码
method: GET或POST方法,默认是get方法
data : 发送给服务器的数据,2种格式:1. 键=值&键=值 2. {键:值, 键:值}
dataType : 服务器返回的数据类型<br />取值:xml, html, script, json, text
success : 服务器正常响应的回调函数,参数就是服务器返回的数据
error : 服务器出现异常的回调函数,参数是XMLHttpRequest对象
*/
//登录按钮的点击事件
$("#btnLogin").click(function () {
//1.获取用户输入的用户名和密码
let username = $("#username").val();
let password = $("#password").val();
//2.使用$.ajax访问服务器
$.ajax({
url: "json/login.json",
data: "a=1&b=2", //发送的数据,可以在浏览器上按f12,选network可以看到
//async: false, //默认是true,表示异步
//服务器正常响应的回调函数,参数就是返回的用户数据
success: function (users) {
let exists = false;
//遍历数组中每个用户
for (let user of users) {
//比较用户名和密码是否相同
if (user.name == username && user.password == password) {
exists = true;
break;
}
}
//输出登录成功或失败
if (exists) {
alert("登录成功,欢迎您:" + username);
}
else {
alert("登录失败,请重试");
}
},
dataType: "json", //指定返回数据类型是json
error: function (request) { //出现异常回调函数,参数是XMLHttpRequest对象
alert("服务器出现异常,状态码是:" + request.status);
}
});
//alert("浏览器端的代码继续执行"); //不会等服务器处理完,会一直向后执行
});
</script>
</body>
</html>
小结
属性名称 | 解释 |
---|---|
url | 服务器地址 |
async | 默认是异步发送请求true |
data | 发送给服务器数据 |
method | 请求的方式:get或post |
dataType | 服务器返回的数据类型 |
success | 服务器正常响应的回调函数,函数参数就是服务器返回的数据 |
error | 服务器出现异常的回调函数,参数是XMLHttpRequest对象 |
上午的回顾
JQ事件动态绑定
JQ对象.on("事件名",function())
JQ对象.on({
"事件名":function,
"事件名":function
})
JQ对象.off("事件名 事件名")
JQ对象.off()
JQ循环遍历方式
JQ对象.each(function(index,element));
$.each(集合或数组, function(index,element));
for(let 变量名 of 集合或数组)
注:无论使用上面哪种方式,每个元素都是js对象
XMLHttpRequest对象
创建对象:new XMLHttpRequest()
事件:onreadystatechange
属性:readyState 4 status 200 responseText 得到服务器返回的数据,字符串
方法:open("get","url",true) send()
3.0以前 . g e t 或 .get或 .get或.post方法
$.get或$.post
url: 访问地址
data: 发送数据
callback: 回调函数
type: 服务器返回数据类型
3.0以后使用$.ajax
$.ajax
{
url: 访问地址
data: 发送数据
async: 同步或异步
dataType: 服务器返回的数据类型
success: 服务器正常响应的回调函数,参数:就是服务器返回的数据
error: 服务器出现异常回调函数,参数:XMLHttpRequest对象
}
以后常用的是以下三个属性:
url, data, success
jQuery3.0的$.get()和$.post方法
目标
- 学习3.0新的 . g e t ( ) 或 .get()或 .get()或.post()方法,签名与$.ajax()完全一样
- 使用 . g e t ( ) 或 .get()或 .get()或.post()方法实现登录
新增签名方式语法
在jQuery框架中, 符 号 相 当 于 j Q u e r y 这 个 单 词 , 所 有 出 现 符号相当于jQuery这个单词,所有出现 符号相当于jQuery这个单词,所有出现的地方都可以使用jQuery来代替
案例:GET新增签名方式实现上面的登录
步骤
- 给登录按钮添加点击事件
- 得到表单中所有的数据项
- 使用$.get()方法发送请求
- 设置url请求地址,success成功的回调函数
- 在回调函数中遍历整个集合,比较每个用户名和密码是否与输入的用户名和密码相同
- 如果有相同的,返回true,否则返回false
- 如果为true,输出登录成功,否则输出登录失败
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password"/></td>
</tr>
<tr>
<!--登录按钮是一个普通按钮-->
<td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/></td>
</tr>
</table>
</form>
<script type="text/javascript">
/*
$.get({键:值,键:值}) $.post
url : 服务器访问地址
async :默认是异步,取值是true,设置为false表示同步
异步:不会等服务器处理完,会一直向后执行
同步:等服务器处理完毕,才执行后面的JS代码
method: GET或POST方法,默认是get方法
data : 发送给服务器的数据,2种格式:1. 键=值&键=值 2. {键:值, 键:值}
dataType : 服务器返回的数据类型<br />取值:xml, html, script, json, text
success : 服务器正常响应的回调函数,参数就是服务器返回的数据
error : 服务器出现异常的回调函数,参数是XMLHttpRequest对象
*/
//登录按钮的点击事件
jQuery("#btnLogin").click(function () {
//1.获取用户输入的用户名和密码
let username = jQuery("#username").val();
let password = jQuery("#password").val();
//2.使用$.get访问服务器
jQuery.get({
url: "json/login.json",
method: "post",
data: "a=1&b=2", //发送的数据,可以在浏览器上按f12,选network可以看到
//async: false, //默认是true,表示异步
//服务器正常响应的回调函数,参数就是返回的用户数据
success: function (users) {
let exists = false;
//遍历数组中每个用户
for (let user of users) {
//比较用户名和密码是否相同
if (user.name == username && user.password == password) {
exists = true;
break;
}
}
//输出登录成功或失败
if (exists) {
alert("登录成功,欢迎您:" + username);
}
else {
alert("登录失败,请重试");
}
},
dataType: "json", //指定返回数据类型是json
error: function (request) { //出现异常回调函数,参数是XMLHttpRequest对象
alert("服务器出现异常,状态码是:" + request.status);
}
});
});
</script>
</body>
</html>
GET请求和POST请求区别
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zxOexctf-1593429872857)(assets/image-20200417141526383.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tvOmK2wR-1593429872864)(assets/image-20200417141624033.png)]
如果指定method参数,优先使用method中指定的方法
小结
方法常用的三个参数:
常用的三个属性 | 解释 |
---|---|
url | 服务器访问地址 |
data | 发送给服务器的数据 |
success | 服务器正确响应回调函数,函数的参数就是服务器返回的数据 |
案例:输入自动补全
需求
在输入框输入关键字,下拉框中异步显示与该关键字相关的用户名称
服务器端代码
search.json
[
"张三",
"李四",
"王五",
"赵六",
"田七",
"孙八",
"张三丰",
"张无忌",
"李寻欢",
"王维",
"李白",
"杜甫",
"李贺",
"李逵",
"宋江",
"王英",
"鲁智深",
"武松",
"张薇",
"刘小轩",
"刘浩宇",
"刘六"
]
分析页面组成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bhzbMRoA-1593429872869)(assets/image-20200417144935278.png)]
步骤
- 编写文本框的keyup事件
- 得到word文本框的值
- 去掉值前后的空格,判断值是否为空,如果为空,则返回不再继续。
- 否则使用$.post方法发送请求给服务器
- 在success回调函数中得到服务器返回数据:JSON格式所有用户的集合
- 创建正则表达式,匹配以^word开头的用户
- 创建一个数组用来保存符合条件的字符串
- 如果上面的数组不为空,则进行字符串拼接,每个用户是一个div。
- 拼接完成以后使用html()方法填充到#show的div中
- 如果集合为空,则隐藏#show的div
拓展
- 给#show中div添加点击事件
- 将 div 的文本内容显示在#word的值中
- 隐藏#show这个div
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自动完成</title>
<style type="text/css">
.content {
width: 400px;
margin: 30px auto;
text-align: center;
}
input[type='text'] {
box-sizing: border-box;
width: 280px;
height: 30px;
font-size: 14px;
border: 1px solid #38f;
}
input[type='button'] {
width: 100px;
height: 30px;
background: #38f;
border: 0;
color: #fff;
font-size: 15px;
}
#show {
box-sizing: border-box;
position: relative;
left: 7px;
font-size: 14px;
width: 280px;
border: 1px solid dodgerblue;
text-align: left;
border-top: 0;
/*一开始是隐藏不可见*/
display: none;
}
#show div {
padding: 4px;
background-color: white;
}
#show div:hover {
/*鼠标移上去背景变色*/
background-color: #3388ff;
color: white;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content">
<img alt="传智播客" src="img/logo.png"><br/><br/>
<input type="text" name="word" id="word">
<input type="button" value="搜索一下">
<div id="show"></div>
</div>
<script type="text/javascript">
/*
alert(event.keyCode); //keyCode键盘码表,每个按键都会对应一个号码
*/
//不能使用change事件,因为change要失去焦点才激活,只要松开任何一个键就激活
$("#word").keyup(function () {
//判断文本框中是否有数据,如果不为空,才继续,去掉前后空格
let word = $("#word").val().trim();
if (word == "") {
//如果文本框中没有内容,也要隐藏div
$("#show").hide();
return; //不再继续
}
//表示有数据的,开始访问服务器
$.get({
url: "json/search.json", //服务器的访问地址
success: function (users) { //返回服务器上所有的数据
//使用正则表达式,只保留指定字符串开头的用户名
let reg = new RegExp("^" + word);
//创建一个数组,用来保存所有以word开头的用户
let arr = new Array();
//遍历整个数组
for (let user of users) {
//判断每个字符串是否匹配正则表达式
if (reg.test(user)) {
arr.push(user); //添加到数组中
}
}
//把arr数组显示在div中
//先判断数组中是否有元素,有元素才显示
if (arr.length > 0) {
//拼接字符串
let html="";
for (let name of arr) {
html+="<div>" + name + "</div>";
}
//放在#show的div中
$("#show").html(html); //括号中是一个变量名html
//显示div
$("#show").show();
//如果点击每个小的div,就把div中文本赋值给文本框的value
$("#show div").click(function () {
//this相当于你点击的那个div
$("#word").val($(this).text());
//隐藏大的div
$("#show").slideUp("normal"); //加个动画
});
}
else { //没有元素隐藏div
$("#show").hide();
}
}
});
});
</script>
</body>
</html>
小结
-
使用文本框的键盘松开事件 keyup
-
$.post() 提交数据给服务器,返回JSON集合
-
遍历集合,拼接成div的字符串
-
使用html()方法将拼接好的字符串覆盖div中原有的内容
-
显示show这个div
学习总结
-
能够使用jQuery的绑定与解绑方法
事件绑定 语法 JQ对象.on(“事件名”, function() {}) 动态绑定事件 事件解绑 语法 JQ对象.off(“事件名1 事件名2”) 解绑一个或多个事件 JQ对象.off() 解绑所有的事件 -
能够使用jQuery对象的遍历方法
JQ对象.each(function(index,element)) JQ对象:要遍历的集合
index: 索引号
element: 每个元素,都是JS对象 -
能够使用jQuery全局的遍历方法
$.each(数组或集合, function(index,element)) 数组或集合: 要遍历的数组或集合
index: 索引号
element: 每个元素,都是JS对象 -
能够理解异步的概念
浏览器与服务器是并行操作,浏览器端的数据是后端发送给服务器,浏览器不会等服务器返回数据会继续向后执行代码。
-
能够了解原生js的ajax
方法 | 说明 |
---|---|
new XMLHttpRequest() | 创建核心对象 |
onreadystatechange | 准备状态发生变化时激活 |
open(“GET”,URL,true) | 打开链接 |
send() | 发送请求 |
- 能够使用jQuery的$.get() $.post()进行访问
- 传统:
参数名称 | 解释 |
---|---|
url | 访问地址 |
data | 发送的数据,两种格式:键=值 或 {键:值} |
callback | 回调函数,回调函数的参数是服务器返回的数据 |
type | 服务器返回的数据类型 |
- 3.0以后新的
属性名称 | 解释 |
---|---|
url | 请求的地址 |
async | 异步或同步 |
data | 发送的数据,两种格式:键=值 或 {键:值} |
dataType | 服务器返回的数据类型 |
success | 服务器正常响应的回调函数,回调函数的参数是服务器返回的数据 |
error | 服务器异常的回调函数,参数是XMLHttpRequest对象 |
- 能够完成自动补全的案例