day06 ajax
程序员文章站
2022-06-13 12:31:04
...
1 绑定和解绑
<!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绑定鼠标移上的事件
// 分解式
// 1 给id=content的标签绑定鼠标悬浮事件
// $("#content").mouseover(function(){
// console.log("1 鼠标悬浮事件 : " + new Date().toLocaleString());
// });
// 2 给id=content的标签绑定鼠标移出事件
// $("#content").mouseout(function(){
// console.log("2 鼠标移出事件 : " + new Date().toLocaleString());
// });
// 3 通过on绑定一个事件
// $("#content").on("mouseover", function(){
// console.log("333333333333333 鼠标悬浮事件 : " + new Date().toLocaleString());
// });
// 3 通过on绑定多个事件
$("#content").on({
"mouseover" : function() {
console.log("44444444444444 鼠标悬浮事件 : " + new Date().toLocaleString());
},
"mouseout" : function() {
console.log("5555555555555555555555 鼠标移出事件 : " + new Date().toLocaleString());
}
});
});
//b2按钮点击事件
$("#b2").click(function () {
//解绑所有的事件
//$("#content").off();
// 解绑一个事件
// $("#content").off("mouseout");
// 解绑多个事件
$("#content").off("mouseout mouseover");
})
</script>
</body>
</html>
2 隐藏和显示
<!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() 下滑和上滑
-->
<div id="content">
<img src="img/adv1.jpg" id="girl" width="300"/>aaaaa
</div>
<script type="text/javascript">
// 显示 图片
$("#b1").click(function () {
// $("#girl").show();
// 显示
// 方式一
// $("#girl").attr("style", "display:block"); // block 块级元素, 独占一行
// $("#girl").attr("style", "display:inline"); // inline 行内元素, 不会独占一行, 会挨着写
// 方式二:
// $("#girl").css("display", "block");
$("#girl").css("display", "inline");
})
//第2个按钮点击隐藏
$("#b2").click(function () {
// 方式一
// <img src="img/adv1.jpg" id="girl" style="display:none"/>
// $("#girl").hide();
// 方式二
// $("#girl").attr("style", "display:none");
// 方式三
$("#girl").css("display", "none"); // 隐藏
})
</script>
</body>
</html>
3 动画效果
<!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">
<input type="button" value="切换滑动" id="b3">
<input type="button" value="淡入" id="b4">
<input type="button" value="淡出" id="b5">
<input type="button" value="切换淡入淡出" id="b6">
<hr/>
<!--
显示和隐藏图片，有一个css样式：
display：
1. none 隐藏
2. block 设置成块级元素显示
3. inline 设置成内联元素显示
jQuery有方法直接可以实现：
show(毫秒) 显示，可以指定时间，单位是毫秒
hide(毫秒) 隐藏
fadeIn() / fadeOut() 淡入淡出
slideDown() / slideUp() 下滑和上滑
-->
<div id="content">
<img src="img/adv1.jpg" id="girl" width="500"/>
</div>
<script type="text/javascript">
// 显示 图片
$("#b1").click(function () {
// $("#girl").show();
// 显示
// 方式一
// $("#girl").attr("style", "display:block"); // block 块级元素, 独占一行
// $("#girl").attr("style", "display:inline"); // inline 行内元素, 不会独占一行, 会挨着写
// 方式二:
// $("#girl").css("display", "block");
// $("#girl").css("display", "inline");
// 动画效果: 向下滑动
$("#girl").slideDown("slow");
})
//第2个按钮点击隐藏
$("#b2").click(function () {
// 方式一
// <img src="img/adv1.jpg" id="girl" style="display:none"/>
// $("#girl").hide();
// 方式二
// $("#girl").attr("style", "display:none");
// 方式三
// $("#girl").css("display", "none"); // 隐藏
// 动画效果: 向上滑动
$("#girl").slideUp("slow");
})
// 切花滑动
$("#b3").click(function() {
console.log(111);
$("#girl").slideToggle();
});
// 淡入
$("#b4").click(function() {
//$("#girl").fadeIn("slow");
$("#girl").fadeIn(5000);
});
// 淡出
$("#b5").click(function() {
//$("#girl").fadeOut("slow");
$("#girl").fadeOut(5000);
});
// 切换淡入淡出
$("#b6").click(function() {
$("#girl").fadeToggle(5000);
});
</script>
</body>
</html>
4_循环
<!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中的文本
// 1 得到所有的option元素
let options = $("#city option");
//使用对象方法
$("#b1").click(function () {
options.each(function(index, domEle){
console.log(index + " ================ " );
// domEle和this 是js对象: <option>xxxxxxx</option>
// console.log(domEle);
// console.log(this);
// 获取js对象标签中的内容: 获取<option>xxxxxxx</option> 标签的 xxxxxxx
// console.log(domEle.innerText);
// console.log(this.innerText);
// 调用jquery对象的属性和方法
// console.log($(domEle));
// console.log($(this));
// 获取js对象标签中的内容
console.log($(domEle).text());
console.log($(this).text());
});
});
//使用全局方法
$("#b2").click(function () {
$.each(options, function(index, domEle){
console.log(index + " ************** " + $(domEle).text());
})
});
//这是ES6中新增的方法
$("#b3").click(function () {
for (let opt of options) {
console.log("========================================");
// opt是 js对象 还是jquery对象? js对象
console.log(opt);
console.log(opt.value); // 获取标签的value属性值 <option value="广州">
console.log(opt.innerText);// <option>广州</option>
// 调用jquery对象的属性和方法
console.log($(opt));
console.log($(opt).val());
console.log($(opt).text());
}
});
</script>
</body>
</html>
5 传统的ajax(了解)
5.1 分析图
5.2 传统的ajax
<!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">
// 目标: 当用户名输入框 键盘弹起时, 立刻校验用户名是否被占用
// 1 给用户名输入框 绑定 键盘弹起事件
document.getElementById("user").onkeyup = function () {
// this 绑定事件的对象
// this.value 获取用户填写的值
let userVal = this.value;
console.log("获取用户填写的值 ======== " + userVal);
// 判断 用户名不为null, 才有必要向后执行
if(userVal.trim() == "") {
document.getElementById("info").innerHTML = "";
return;
}
// 1.2 使用ajax校验
// 1.2.1 创建核心对象
let xmlhttp = new XMLHttpRequest();
// 1.2.2 发送请求
/**
*
第一个参数: method：请求的类型；GET 或 POST
第二个参数: url：文件在服务器上的位置
第三个参数: async：true（异步）或 false（同步）
*/
xmlhttp.open("GET", "json/users.json", true);
xmlhttp.send();
// 1.2.3 处理响应
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// xmlhttp.responseText 这是服务器返回的文本
let data = xmlhttp.responseText; // 服务器返回的数据是 所有的已注册的用户名
console.log("服务器返回的文本: " + data);
console.log("服务器返回的文本的类型: " + typeof(data));
// 字符串不能像数组那样被遍历,怎么办?
// 将将字符串 转成 数组
var users = JSON.parse(data);
// 判断用户填写的用户名是否被占用
let isExist = false;
for(let user of users) {
// console.log(user);
if(user == userVal) {
isExist = true;
break;
}
}
// 给用户提示信息
if(isExist) {
// 被占用
document.getElementById("info").innerHTML = "<font color='red'>用户名被占用,请更换!</font>"
}else {
// 可以使用
document.getElementById("info").innerHTML = "<font color='green'>用户名可以使用!</font>"
}
}
}
}
</script>
</body>
</html>
6 jquery的ajax: 校验用户名是否被占用(掌握)
<!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
*/
//用户名的改变事件
// 目标: 当 输入框中键盘弹起时触发, 判断用户是否已注册
// 1 给用户名输入框绑定键盘弹起事件
$("#user").keyup(function () {
// 1.1 获取用户填写的值
let userVal = $(this).val();
console.log("获取用户填写的值 ============ " + userVal);
// 1.3 如果用户填写的值的为空, 后面的操作就不用写了
if(userVal==null || userVal.trim() == "") {
$("#info").html("");
return;
}
// 1.2 判断用户是否已注册, 使用jquery的ajax
/**
type: "POST", // 指定请求方式: 如 ｇｅｔ 或 ｐｏｓｔ
url: "some.php", // 指定服务器的路径
data: "name=John&location=Boston", // 携带的参数信息
success: function(msg){ // 成功回调函数
alert( "Data Saved: " + msg );
},
dataType: "josn" // 希望服务器返回数据的类型
*/
// $.ajax({
// type: "POST",
// url: "json/users.json",
// data: "name=John&location=Boston", // 参数: 浏览器给服务器的参数
// success: function(users){ // data 服务器返回的数据
// console.log(users);
// console.log(typeof(users)); // object
// // 1. 判断用户书写的用户名是否被占用
// let isExist = false;
// for (let user of users) {
// if(userVal == user) {
// isExist = true;
// }
// }
// // 2 判断 如果被占用, 提示错误信息
// if(isExist) {
// $("#info").html("<font color='red'>用户名被占用,请更换!</font>");
// }else {
// $("#info").html("<font color='green'>用户名可以使用!</font>");
// }
// // 如果没有被占用, 提示成功信息
// },
// dataType: "json"
// });
// 放松get方式的请求
// $.get({
// url: "json/users.json",
// data: "name=John&location=Boston", // 参数: 浏览器给服务器的参数
// success: function(users){ // data 服务器返回的数据
// console.log(users);
// console.log(typeof(users)); // object
// // 1. 判断用户书写的用户名是否被占用
// let isExist = false;
// for (let user of users) {
// if(userVal == user) {
// isExist = true;
// }
// }
// // 2 判断 如果被占用, 提示错误信息
// if(isExist) {
// $("#info").html("<font color='red'>2222 get方式 用户名被占用,请更换!</font>");
// }else {
// $("#info").html("<font color='green'>222222 get方式 用户名可以使用!</font>");
// }
// // 如果没有被占用, 提示成功信息
// },
// dataType: "json"
// });
// 发送post方式的请求
$.post({
url: "json/users.json",
data: "name=John&location=Boston", // 参数: 浏览器给服务器的参数
success: function(users){ // data 服务器返回的数据
console.log(users);
console.log(typeof(users)); // object
// 1. 判断用户书写的用户名是否被占用
let isExist = false;
for (let user of users) {
if(userVal == user) {
isExist = true;
}
}
// 2 判断 如果被占用, 提示错误信息
if(isExist) {
$("#info").html("<font color='red'>3333 post方式 用户名被占用,请更换!</font>");
}else {
$("#info").html("<font color='green'>33333 post方式 用户名可以使用!</font>");
}
// 如果没有被占用, 提示成功信息
},
dataType: "json"
});
});
</script>
</body>
</html>
7 jquery的ajax: 登录业务(掌握)
<!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(){
// 获取用户填写的用户名和密码
var username = $("#username").val();
var password = $("#password").val();
// 使用ajax获取所有的用户信息
$.post({
url: "json/login.json",
success: function(data){
// 1 判断用户名和密码是否正确
let isExist = false;
for(let user of data) {
// console.log(user);
if(user.name==username && user.password==password) {
isExist = true;
break;
}
}
// 2 提示
if(isExist) {
alert("欢迎" + username + "访问本网站!")
}else {
alert("用户名或密码错误!");
}
}
});
});
</script>
</body>
</html>
8 代码补全案例(掌握)
<!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">
// 目标: 代码补全
// 1 给 输入框 绑定键盘弹起事件
$("#word").keyup(function () {
// 1.1 获取用户输入的值
var word = $("#word").val();
// console.log("获取用户输入的值: ============== " + word);
// 如果用户没有输入关键字, 就没有必要执行后续的代码
if(word==null || word.trim()=="") {
$("#show").empty().hide();
return;
}
// 1.2 通过ajax索取所有的数据
$.post({
url: "json/search.json",
success: function(data){
// console.log("服务器返回的数据: ==== " + data);
// 1.2.1 过滤 需要的数据 放到数组中
// 因为需要过滤, 正则
var reg = new RegExp("^" + word);
var arr = new Array();
for(var key of data) {
if(reg.test(key)) {
arr.push(key);
}
}
console.log("满足条件的数组: " + arr);
// 1.2.2 判断
if(arr!=null && arr.length>0) {
// 1.2.2.1 如果数组不为空, 将数据显示到对应的位置上
var str = "";
for (var i=0; i<arr.length; i++) {
str += "<div>" + arr[i] + "</div>"
if(i>=5) {
break; // 如果超过6个, 跳出循环
}
}
$("#show").html(str);
$("#show").slideDown(); // 向下滑动显示自动提示
// 目标: 点击提示内容, 将提示内容显示到 输入框, 且隐藏提示内容
$("#show div").click(function () {
// 获取提示内容
let con = $(this).text();
$("#word").val(con);
$("#show").hide();// 隐藏提示内容框
});
}else {
// 1.2.2.2 如果数组为空, 清空显示的位置
$("#show").html("");
$("#show").slideUp(); // 向上滑动隐藏自动提示的div
}
}
});
})
</script>
</body>
</html>
注意:
1 面对复杂的案例, 不要想得特别细致, 出一个大致的思路
2 在做的过程中 慢慢迭代优化