一:基础知识点
一、Ajax知识回顾
1.Ajax是英文 Asynchronous JavaScript and XML,异步的javascript和xml的简称;
2.主要用于不刷新或页面跳转的情况下,发送另一个http请求,动态更新当前页面中的数据,
使用户始终停留在当前页面,提升用户体验;
3.js原生提供一个对象: XMLHttpRequest()可以完成Ajax的所有操作,但操作很繁琐,且容易出错;
4.jQuery将常用的Ajax操作进行的封装,提供一套简单的接口,来简化用户的Ajax请求;
5.Ajax主要涉及二类http请求: GET 和 POST ,GET用于从服务器获取数据,POST用于向服务器发送数据;
5.原生的Ajax请求,请大家参考前面的课程,这套课程主要是讲述jQuery中的Ajax请求是如何实现的。
----------------------------------------------------------------------------------------
二、load()方法
1.这是jQuery中最简单的Ajax请求方法,默认为GET请求方式;
2.语法: load(url[,data,callback]),load(请求的url地址,请求数据,请求成功后回调函数);
(1).url: 请求的服务器上的资源的url地址,可以是一个txt,html,php....
(2).data:
[1]. GET请求: 无参数或是名值对格式字符串;
[2]. POST请求: 对象或数组;
(3).function(data,statuStr,xhr), function(响应文本,状态字符串(success),xhr对象)
3.调用: 该方法需要在jQuery对象上调用,回调适用于jQuery集合中每一个元素,例如: $('#box').load(...);
4.优势:
(1).自动参数自动判断请求类型是GET还是POST;
(2).可直接将load()返回值做为DOM元素内容自动插入,省去了append()等DOM操作
5.返回: 响应的内容;
-----------------------------------------------------------------------------------------
三、$.get()函数
1.$.get(),用于从服务器上读取内容
2.语法:$.get(url[,data][,callback][,dataType])
3.url: 服务器上的url地址,为空表示当前地址;
4.data:
(1).查询字符串格式: name=peter&age=88;
(2).对象字面量: {name:'peter',age:88},自动序列化为上面的查询字符串;
5.callback: 请求成功的回调函数,function(响应文本,状态字符串,xhr对象),如果不需要回调,可设为null;
6.dataType: 响应内容类型/应答消息体, html/text/xml/json/script/jsonp;
7.返回值: 返回xhr对象
-----------------------------------------------------------------------------------------
四、$.getJSON()函数
1. $.getJSON()专用于解析从服务器上返回的json格式的内容;
2. 其实它就是$.get()函数中,将返回数据类型dataType设置为'json'格式时的简写函数;
3. $.getJSON()需要读取json格式的数据,为简化起见,我直接创建了一个json文件,实际开发中应该从接口获取;
-----------------------------------------------------------------------------------------
五、$.getScript()函数
1. $.getScript()用于动态加载外部的javascript脚本文件;
2. $.getScript(脚本地址,成功回调);
3. 可以任何位置加载外部脚本
-----------------------------------------------------------------------------------------
六、$.post()函数
1. $.post()用于向服务器发送大量的,敏感的信息(信息在消息体中而非url地址中)
2. $.post(url[,data][,callback][,dataType]),参数与$.get()相同
3. url: http请求的url处理程序;
4. data: 消息体中的数据,以查询字符串或对象字面量形式提供;
5. callback: 成功后的回调方法,function(data,status,xhr){...};
6. dataType: 期望服务器端响应返回的数据格式,如html,json,text,xml,_default...
------------------------------------------------------------------------------------------
七、$.ajax()函数
1.学完前面的知识,$.ajax()就显得非常简单了;
2.load(),$.get(),$.getJSON(),$.getScript(),$.post()其实都是$.ajax()快捷方式罢了;
3.$.ajax()的参数是一个对象,键名对应的属性非常多,并且键名不允许自定义,很多之前我们已经学过了;
4.尽管参数很多,但实际开发中,经常用到的并不多,大家不必太纠结,有的参数用到了再查手册也不迟;
5.常用属性:
(1). url : 请求的url资源地址;
(2). type: 请求的类型,get / post;
(3). data: 发送的参数;
(4). dataType: 响应的数据类型;
(5). success: 响应成功的回调方法;
6.该方法是jQuery中Ajax的底层实现,前面的方法或函数其实都在它基础实现的功能封装;
下面我们将$.post()中的登录验证功能,使用$.ajax()进行改写
------------------------------------------------------------------------------------------
二.具体实例
1. load --post请求 实例 detail.php, school.php服务器文件
实例
一.html请求文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>load()方法</title>
</head>
<body>
<h3>江湖门派查询系统load()</h3>
<label for="school">请选择:</label>
<select name="school" id="school"></select>
<p id="detail"></p>
<script src="../lib/jquery.js"></script>
<script>
$('#school') // 获取下拉列表
.load('inc/school.php') //从服务器获取数据
.change(function (event) {
$('#detail').load(
//事件处理的脚本
'inc/detail.php',
// 发送到服务器上的数据
{key: $(event.target).val()},
// 成功后的回调处理方法
function () {
// console.log($(event.target).val())
$('[value=""]').remove();
}
);
})
</script>
</body>
</html>
二.school.php
<?php
$schools = ['丐帮', '古墓派', '峨眉派'];
//echo json_encode($schools);die;
$option = '<option value="">请选择</option>';
foreach ($schools as $key => $value) {
$option .= "<option value='{$key}'>{$value}</option>";
}
echo $option;
三.detail.php
<?php
$detail = [
0=>'<img src="inc/images/1.jpg" width="200px"><h3>帮主:黄蓉,绝招:《打狗棒法》</h3>' ,
1=>'<img src="inc/images/2.jpg" width="200px"><h3>帮主:小龙女,绝招:《玉女剑法》</h3>' ,
2=>'<img src="inc/images/3.jpg" width="200px"><h3>帮主:周芷若,绝招:《九阴真经》</h3>' ,
3=>'<img src="inc/images/4.jpg" width="200px"><h3>帮主:严晓明,绝招: 逃跑</h3>' ,
];
//$_POST['key']: 返回键名
echo $detail[$_POST['key']];
// echo $detail[$_GET['key']];运行实例 »
点击 "运行实例" 按钮查看在线实例
2.get请求
实例
1.提交请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.get()函数</title>
</head>
<body>
<h3>江湖门派查询系统$.get()</h3>
<label for="school">请选择:</label>
<select name="school" id="school"></select>
<p id="detail"></p>
<script src="../lib/jquery.js"></script>
<script>
$.get('inc/school.php',function (data, status, xhr) {
// console.log(data);
// console.log(status);
// console.log(xhr);
if (status === 'success') {
// $('#school').html(data);
$(data).appendTo('#school');
}
});
$('#school').change(function (event) {
// console.log($(this).serialize());
$.get(
//请求的Url地址
'inc/detail.php',
//请求数据
{key: $(event.target).val()},
//请求成功的回调
function (data, status) {
if (status === 'success') {
$('#detail').html(data);
$('[value=""]').remove();
} else {
$('#detail').html('<span style="color:red">请求失败</span>');
}
}
);
})
</script>
</body>
</html>
2.shool.php
<?php
$schools = ['丐帮', '古墓派', '峨眉派'];
//echo json_encode($schools);die;
$option = '<option value="">请选择</option>';
foreach ($schools as $key => $value) {
$option .= "<option value='{$key}'>{$value}</option>";
}
echo $option;
3.detail.php
<?php
$detail = [
0=>'<img src="inc/images/1.jpg" width="200px"><h3>帮主:黄蓉,绝招:《打狗棒法》</h3>' ,
1=>'<img src="inc/images/2.jpg" width="200px"><h3>帮主:小龙女,绝招:《玉女剑法》</h3>' ,
2=>'<img src="inc/images/3.jpg" width="200px"><h3>帮主:周芷若,绝招:《九阴真经》</h3>' ,
3=>'<img src="inc/images/4.jpg" width="200px"><h3>帮主:严晓明,绝招: 逃跑</h3>' ,
];
//$_POST['key']: 返回键名
// echo $detail[$_POST['key']];
echo $detail[$_GET['key']];运行实例 »
点击 "运行实例" 按钮查看在线实例
3.getjson案例
实例
1.请求页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.getJSON()函数</title>
</head>
<body>
<h3>江湖门派查询系统$.getJSON()</h3>
<label for="school">请选择:</label>
<select name="school" id="school"></select>
<p id="detail"></p>
<script src="../lib/jquery.js"></script>
<script>
// 1. $.getJSON()专用于解析从服务器上返回的json格式的内容;
// 2. 其实它就是$.get()函数中,将返回数据类型dataType设置为'json'格式时的简写函数;
// 3. $.getJSON()需要读取json格式的数据,为简化起见,我直接创建了一个json文件,实际开发中应该从接口获取;
$.getJSON('inc/schools.json',function (data, status) {
if (status === 'success') {
//默认的显示内容
let option = '<option value="">请选择</option>';
// console.log(data);
$.each(data, function(i){// $.each()专用来遍历对象或数组的全局函数
console.log(data[i]);
option += '<option value="'+i+'">'+data[i]+'</option>';
});
console.log(option);
// 将拼装好的html代码添加到<select>中
$('#school').html(option);
}
});
$('#school').change(function (event) {
// console.log($(this).serialize());
$.get(
//请求的Url地址
'inc/detail.php',
//请求数据
{key: $(event.target).val()},
//请求成功的回调
function (data, status) {
if (status === 'success') {
$('#detail').html(data);
$('[value=""]').remove();
} else {
$('#detail').html('<span style="color:red">请求失败</span>');
}
}
);
})
</script>
</body>
</html>
2.schools.json
["丐帮", "古墓派", "峨眉派"]运行实例 »
点击 "运行实例" 按钮查看在线实例
4.getScript实例
实例
1.提交页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../lib/jquery.js"></script>
<script>
// 在页面中使用js运用的创建一个按钮
$.getScript('inc/demo.js',function () {
// 将按钮设置为淡出
// $('button').fadeOut(3000);
$('button').fadeTo(3000,0.3);
});
</script>
</body>
</html>
2.demo.js页面
$('<button></button>')
.html('动态加载脚本')
.width(150)
.height(150)
.css('background-color','yellow')
.appendTo('body');运行实例 »
点击 "运行实例" 按钮查看在线实例
5.post在验证
1.提交界面
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.post()</title>
</head>
<body>
<h3>用户登录$.post()</h3>
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email">
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</p>
<p><button>提交</button></p>
<script src="../lib/jquery.js"></script>
<script>
$('button').click(function () {
//邮箱的非空验证
if ($('#email').val().length === 0) {
$('#email').after('<span style="color:red">邮箱不能为空</span>')
.next().fadeOut(3000);
$('#email').focus(); // 设置焦点
return false;
}
//密码的非空验证
if ($('#password').val().length === 0) {
$('#password').after('<span style="color:red">密码不能为空</span>')
.next().fadeOut(3000);
$('#password').focus(); // 设置焦点
return false;
} else if ($('#password').val().length < 6) {
$('#password').after('<span style="color:red">密码长度不能少于6位</span>')
.next().fadeOut(3000);
$('#password').focus(); // 设置焦点
return false;
}
$.post(
//处理请求的脚本
'inc/check.php',
//要发送到服务器上的数据
{
email: $('#email').val(),
password: $('#password').val()
},
// 响应成功的回调
function (data) {
console.log(data);
if (data.status == 1) { // 验证通过
$('button')
.after('<span style="color:green"></span>')
.next() // 切换到span
.html(data.message) // 填充span内容
.fadeOut(2000);
} else {
$('button')
.after('<span style="color:red"></span>')
.next() // 切换到span
.html(data.message) // 填充span内容
.fadeOut(2000);
}
},
//响应数据的类型
'json'
);
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.check.php
实例
<?php
//echo json_encode('测试数据');
// 连接数据库并验证用户
$email = htmlspecialchars(trim($_POST['email']));
$password = sha1(htmlspecialchars(trim($_POST['password'])));
$pdo = new PDO('mysql:host=127.0.0.1;dbname=phpcn','root','root');
$sql = "SELECT COUNT(*) FROM `user` WHERE `email`=:email AND `password`=:password ";
$stmt = $pdo->prepare($sql);
$stmt->execute(['email'=>$email,'password'=>$password]);
if ($stmt->fetchColumn(0) == 1) {
$status = 1;
$message = '验证通过';
} else {
$status = 0;
$message = '邮箱或密码错误';
}
echo json_encode(['status'=>$status, 'message'=>$message]);运行实例 »
点击 "运行实例" 按钮查看在线实例
6.ajax实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.ajax()</title>
</head>
<body>
<h3>用户登录$.ajax()</h3>
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email">
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</p>
<p><button>提交</button></p>
<script src="../lib/jquery.js"></script>
<script>
$('button').click(function () {
//邮箱的非空验证
if ($('#email').val().length === 0) {
$('#email').after('<span style="color:red">邮箱不能为空</span>')
.next().fadeOut(3000);
$('#email').focus(); // 设置焦点
return false;
}
//密码的非空验证
if ($('#password').val().length === 0) {
$('#password').after('<span style="color:red">密码不能为空</span>')
.next().fadeOut(3000);
$('#password').focus(); // 设置焦点
return false;
} else if ($('#password').val().length < 6) {
$('#password').after('<span style="color:red">密码长度不能少于6位</span>')
.next().fadeOut(3000);
$('#password').focus(); // 设置焦点
return false;
}
$.ajax({ // 参数必须是对象
type: 'post', // 请求类型
url: 'inc/check.php', // 请求的脚本
// data: 'email='+$('#email').val()+'&password='+$('#password').val(),
data: { // 请求数据
email: $('#email').val(),
password: $('#password').val()
},
dataType: 'json',
success: function (data) {
console.log(data);
if (data.status == 1) { // 验证通过
$('button')
.after('<span style="color:green"></span>')
.next() // 切换到span
.html(data.message) // 填充span内容
.fadeOut(2000);
} else {
$('button')
.after('<span style="color:red"></span>')
.next() // 切换到span
.html(data.message) // 填充span内容
.fadeOut(2000);
}
}
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
7.