目录
回顾上节知识：
一、Ajax请求：异步的请求.可以进行页面的局部刷新
1、Ajax的核心：异步请求对象XMLHttpRequest
2、Ajax请求的步骤：
(1)创建XMLHttpRequest的对象
var xhr = new XMLHttpRequest()
(2)对异步请求对象进行配置：请求方式、请求的地址
xhr.open('请求方式','请求地址');
(3)向服务器发起请求
xhr.send()
(4)当请求-响应发生后,会产生一个状态码,客户端可以根据状态码来触发XMLHttpRequest的事件,目的是获取服务器的响应信息(即客户端如何知道服务器的响应)–onreadystatechange
xhr.onreadystatechange = function(){}
☀️案例演示：使用Ajax对象发起登录验证请求。
(1)若用户名或密码错误，页面局部刷新显示‘用户名或密码错误’
(2)若用户名或密码正确,页面局部刷新显示’登录成功’
login.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 500px;
margin: 100px auto;
}
</style>
<body>
<div>
<label>
用户名：<input type="text" id="userName" name="username">
</label>
<br><br>
<label>
密 码：<input type="password" id="userPwd" name="password">
</label>
<br><br>
//因为不是表单提交，所以类型就是普通的button类型
<button type="button" id="btn_reset">重置</button>
<button type="button" id="btn_submit">提交</button>
<br><br>
<span id="msg"></span>
</div>
<script>
// 1、获取登录按钮
var btn_submit=document.querySelector('#btn_submit')
// 2、给登录按钮绑定click事件
btn_submit.onclick=function(){
//2.1 获取用户输入的用户名和密码
let name=document.querySelector('#userName').value
let pwd=document.querySelector('#userPwd').value
//2.2创建异步请求对象
let xhr =new XMLHttpRequest()
//2.3配置请求对象
let url='http://localhost:5000/login/get?userName='+name+'&userPwd='+pwd
xhr.open('get',url)
//2.4向服务器发起请求
xhr.send()
//2.5触发onreadystatechange事件
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
document.querySelector('#msg').innerHTML = xhr.responseText
}
}
}
</script>
</body>
</html>
（express框架）logincheck.js代码：
var express= require('express');
var router =express.Router();
//路由接口
//http://localhost:5000/login/get
router.get('/get',(req, res) => {
let uname=req.query.userName
let upwd=req.query.userPwd
if(uname==='abc' && upwd==='123456'){
res.send('合法用户，登录成功')
}else{
res.send('不合法用户，登录失败')
}
})
module.exports=router
app.js代码：导入cors模块，解决跨域问题
var cors = require('cors');
var loginRouter = require('./routes/logincheck');
app.use(cors());
app.use('/login',loginRouter);
结果展示：输入’abc‘和’123456‘，合法用户
输入’abc‘和’123‘，不合法用户
二、jQuery库对Ajax的封装：
1、底层封装函数：
$.ajax({
url: '请求地址',
type:'请求方式',
contentType:'请求参数的类型',
data:'发送到服务器的数据',
dataType:'服务器返回的数据类型',
success:function(data, textStatus){}, --- 请求-响应成功后调用的函数
error：function(xhr,){} --- 请求-响应失败后调用的函数
})
☀️例子同上：
login.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 500px;
margin: 100px auto;
}
</style>
<body>
<div>
<!-- <form action="" method="post"> -->
<label>
用户名：<input type="text" id="userName" name="username">
</label>
<br><br>
<label>
密 码：<input type="password" id="userPwd" name="password">
</label>
<br><br>
<button type="button" id="btn_reset">重置</button>
<button type="button" id="btn_submit">提交</button>
<!-- </form> -->
<br><br>
<span id="msg"></span>
</div>
<script src="../js/jquery-3.4.1.js"></script>
<script>
$(function(){//jQuery入口函数
//1、给登录按钮绑定click事件
$('#btn_submit').click(function(){
//2、获取用户输入的密码和用户名
let name=$('#userName').val()
let pwd = $('#userPwd').val()
//3.调用ajax函数向服务器发送异步的请求
$.ajax({
url:'http://localhost:5000/login/get',
type:'get',
data:{
userName:name,
userPwd:pwd
},
success:function(data){
$('#msg').html(data)
},
error:function(error){
$('#msg').html(error)
}
})
})
})
</script>
</body>
</html>
logincheck.js后端代码如下：
var express= require('express');
var router =express.Router();
//路由接口
//http://localhost:5000/login/get
router.get('/get',(req, res) => {
let uname=req.query.userName
let upwd=req.query.userPwd
if(uname==='abc' && upwd==='123456'){
res.send('合法用户，登录成功')
}else{
res.send('不合法用户，登录失败')
}
})
module.exports=router
结果展示：输入’abc‘和’123456‘，合法用户
输入’123‘和’12‘，不合法用户
2、高层封装函数：
（1）发起get请求
$.get(url, [data], [callback], [type]) //发起get请求
url：请求的服务器地址
data：请求参数(key/value)
callback：请求成功的回调函数
type：响应信息的格式
login.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 500px;
margin: 100px auto;
}
</style>
<body>
<div>
<!-- <form action="" method="post"> -->
<label>
用户名：<input type="text" id="userName" name="username">
</label>
<br><br>
<label>
密 码：<input type="password" id="userPwd" name="password">
</label>
<br><br>
<button type="button" id="btn_reset">重置</button>
<button type="button" id="btn_submit">提交</button>
<!-- </form> -->
<br><br>
<span id="msg"></span>
</div>
<script src="../js/jquery-3.4.1.js"></script>
<script>
$(function(){//jQuery入口函数
//1、给登录按钮绑定click事件
$('#btn_submit').click(function(){
//2、获取用户输入的密码和用户名
let name=$('#userName').val()
let pwd = $('#userPwd').val()
//3.调用ajax函数向服务器发送异步的请求
$.get('http://localhost:5000/login/get',{userName:name,userPwd:pwd},function(result){
$('#msg').html(result)
})
})
})
</script>
</body>
</html>
logincheck.js后端代码如下：
var express= require('express');
var router =express.Router();
//路由接口
//http://localhost:5000/login/get
router.get('/get',(req, res) => {
let uname=req.query.userName
let upwd=req.query.userPwd
if(uname==='abc' && upwd==='123456'){
res.send('合法用户，登录成功')
}else{
res.send('不合法用户，登录失败')
}
})
module.exports=router
结果展示：输入’abc‘和’123456‘，合法用户
输入’123‘和’12‘，不合法用户
（2）发起post请求
$.post(url, [data], [callback], [type]) //发起post请求
url：请求的服务器地址
data：请求参数(key/value)
callback：请求成功的回调函数
type：响应信息的格式
login.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 500px;
margin: 100px auto;
}
</style>
<body>
<div>
<!-- <form action="" method="post"> -->
<label>
用户名：<input type="text" id="userName" name="username">
</label>
<br><br>
<label>
密 码：<input type="password" id="userPwd" name="password">
</label>
<br><br>
<button type="button" id="btn_reset">重置</button>
<button type="button" id="btn_submit">提交</button>
<!-- </form> -->
<br><br>
<span id="msg"></span>
</div>
<script src="../js/jquery-3.4.1.js"></script>
<script>
$(function(){//jQuery入口函数
//1、给登录按钮绑定click事件
$('#btn_submit').click(function(){
//2、获取用户输入的密码和用户名
let name=$('#userName').val()
let pwd = $('#userPwd').val()
//3.调用ajax函数向服务器发送异步的请求
$.post('http://localhost:5000/login/post',{userName:name,userPwd:pwd},function(result){
$('#msg').html(result)
})
})
})
</script>
</body>
</html>
logincheck.js后端代码如下：
var express= require('express');
var router =express.Router();
//路由接口
//http://localhost:5000/login/post
router.post('/post',(req, res) => {
// let uname=req.query.userName
// let upwd=req.query.userPwd
let uname=req.body.userName
let upwd=req.body.userPwd
if(uname==='abc' && upwd==='123456'){
res.send('合法用户，登录成功')
}else{
res.send('不合法用户，登录失败')
}
})
module.exports=router
结果展示：输入’abc‘和’123456‘，合法用户
输入’123’和’12’，不合法用户
3、辅助函数：
serialize()：表单序列化函数(将表单(form)中的控件的值转换成字符串)
test.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<lable>毕业院校：</lable>
<select name="single">
<option>西安邮电大学</option>
<option>西北政法大学</option>
</select>
<br><br>
<label>兴趣爱好：</label>
<input type="checkbox" name="hobby" value="游泳"/>游泳
<input type="checkbox" name="hobby" value="游戏"/>游戏
<br><br>
<label>性别：</label>
<input type="radio" name="sex" value="男"checked='checked'>男
<input type="radio" name="sex" value="女">女
</form>
<br><br>
<button type="button" id="btn">获取表单数据</button>
<script src="../js/jquery-3.4.1.js"></script>
<script>
$(function(){
$('#btn').bind('click',function(){
let str = $('form').serialize()//表单序列化
$.post('http://localhost:3000/login/serlize',$('form').serialize(),function(result){
console.log(result)
})
})
})
</script>
</body>
</html>
后端test.js代码如下：
var express= require('express');
var router =express.Router();
//路由接口
//http://localhost:5000/login/serlize
router.post('/serlize',(req, res) => {
let single = req.body.single
let hobby =req.body.hobby
let sex =req.body.sex
console.log('学校：',single)
console.log('爱好：',hobby)
console.log('性别：',sex)
res.send('表单序列化')
})
module.exports=router
输出结果：
三、服务器端响应数据的格式是JSON格式
(1)服务器端如何响应json格式数据
res.send({ //将响应信息封装成json格式
key1：value1,
key2：value2,
…
})
(2)客户端接收时,要指定响应信息的格式.
☀️login.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 500px;
margin: 100px auto;
}
</style>
<body>
<div>
<!-- <form action="" method="post"> -->
<label>
用户名：<input type="text" id="userName" name="username">
</label>
<br><br>
<label>
密 码：<input type="password" id="userPwd" id="password">
</label>
<br><br>
<button type="button" id="btn_reset">重置</button>
<button type="button" id="btn_submit">提交</button>
<!-- </form> -->
<br><br>
<span id="msg"></span>
</div>
<script src="../js/jquery-3.4.1.js"></script>
<script>
$(function(){//jQuery入口函数
//1、给登录按钮绑定click事件
$('#btn_submit').click(function(){
//2、获取用户输入的密码和用户名
let name=$('#userName').val()
let pwd = $('#userPwd').val()
//3.调用ajax函数向服务器发送异步的请求
$.post('http://localhost:5000/login/post',{userName:name,userPwd:pwd},function(result){
$('#msg').html(result.msg)//注意，这里得到的是服务器端的msg信息。
},'json')//客户端接收时,要指定响应信息的格式json.
})
})
</script>
</body>
</html>
☀️logincheck.js后端代码如下： ：
var express= require('express');
var router =express.Router();
//路由接口
//http://localhost:5000/login/post
router.post('/post',(req, res) => {
//let uname=req.query.userName
//let upwd=req.query.userPwd
let uname=req.body.userName
let upwd=req.body.userPwd
if(uname==='abc' && upwd==='123456'){
// res.send('合法用户，登录成功')
res.send({
code:1000,
msg:'合法用户，登录成功'
})
}else{
// res.send('不合法用户，登录失败')
res.send({
code:2000,
msg:'不合法用户，登录失败'
})
}
})
module.exports=router
在软件postman测试结果如下图所示：
结果展示：输入’abc‘和’123456‘，合法用户
输入’123’和’12’，不合法用户
2764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
