利⽤ajax完成简单的注册登录⼀、⾸先我们会把ajacx进⾏封装，众所周知，ajax的步骤⼀般分为四个部分
1、创建ajax对象
const xhr = new XMLHttpRequest();
2、打开连接，⾥⾯的三个参数代表的是请求⽅式和连接的路径，路径的后⾯可以直接加？+数据；
第三个参数是布尔类型，代表是否执⾏异步操作，然后true代表异步，false代表同步
xhr.open('get','demo.php?id=1',true);
3、发送请求
xhr.send();
4、监听请求状态
// 判断xhr的状态(0~4 4的时候就圆满完成)和请求的状态 - 200
adyState===4 && xhr.status==200){
// 接收响应数据
let res = sponseText;
console(res);
}
}
然后post请求⾥⾯是需要在send()⾥⾯传输数据的，需要在发送请求前，设置post请求头，
模拟表单来传递数据给服务端（否则获取不到send中的参数）
//请求头
ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
//send发送请求的时候要携带请求参数（键1=值1&键2=值2）
ajax.send('name=Jack&age=18&gender=男')
⼆、然后，我来介绍⼀下，简单的封装ajax
/*
封装ajax
*/
function sendAjax(options){
// 处理每个选项
// 路径必填，且是字符串
if(!options.url){
// 没有传url
throw new Error("请求地址必填");
}
// 如果代码能⾛到这⾥，传了地址
// 判断类型
if(String.call(options.url) !== '[object String]'){
// 不是字符串
throw new Error("请求地址必须是字符串");
}
// 处理请求⽅式
// 没有传，默认是get
if(!hod){
}
// 如果代码能⾛到这⾥，说明传⼊了
// 判断是否是get或post
LowerCase()!=="get" && LowerCase()!=="post"){
// 不是get或post
throw new Error("请求⽅式只接受get或post");
}
// 处理数据
if(!options.data){ // 如果没传
// 默认赋值为null
options.data = null;
}else{ // 如果有传⼊
var data = '';
// 判断数据是字符串还是object
if(String.call(options.data)==='[object String]'){
// 如果是字符串
// 判断是否⾄少包含⼀个 =
if(options.data.indexOf("=") === -1){
throw new Error("数据格式有误！");
}
}else if(String.call(options.data)==='[object Object]'){
// {"username":"张三","password":123456,tel:1234567810} 转为
/
/ 'username=张三&password=123456&tel=12345678910'
var f = '';
for(var attr in options.data){
data += f + attr + "=" + options.data[attr];
f = '&';
}
}
// 代码⾛到这⾥，data都是⼀个字符串，是数据
// 请求⽅式是否为get
hod==="get"){
// 将数据放在地址后⾯
options.url = options.url + "?" + data; // "demo.php?[object Object]"
}
}
// 处理是否异步的async
if(options.async===undefined){ // 值是undefiend表⽰没有传
options.async = true;
}
// 代码⾛到这⾥，说明async传⼊了
// 判断类型是否是布尔值
if(String.call(options.async) !== '[object Boolean]'){
throw new Error("async参数只接受布尔类型");
}
// 处理想要的数据格式 dataType
// 判断是否传⼊
if(!options.dataType){
options.dataType = 'string';
}
// 如果能⾛到这⾥，传⼊了，就判断是否为 string或json
if(LowerCase() !== 'string' && LowerCase() !== 'json'){ throw new Error("dataType参数只接受string或json");
}
// 处理成功时要执⾏的回调函数
// 判断是否传⼊
if(!options.success){
options.success = function(){}
}
// 如果传⼊了，判断是否是⼀个函数
if(String.call(options.success) !== '[object Function]'){
throw new Error("success参数只接受函数类型");
}
// 处理错误是执⾏的函数
if(!){
< = function(){}
}
/
/ 如果传⼊了，判断是否是⼀个函数
if(String.) !== '[object Function]'){
throw new Error("error参数只接受函数类型");
}
// 到这⾥所有参数处理完毕 - 开始ajax
// ajax对象的兼容写法
var xhr;
try{
xhr = new XMLHttpRequest(); // 这种写法在ie下是不能兼容的
}catch(e){
try{
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容ie678
}catch(err){
xhr = new ActiveXObject("Msxml2.XMLHTTP"); // 更低版本ie
}
}
// 打开
xhr.hod,options.url,options.async);
// 监听
// 判断ajax的状态
// 先判断是否完成
adyState===4){
// 在判断是否成功
if(xhr.status>=200 && xhr.status<300){
// 成功
// 获取响应的数据
var res = sponseText;
// 判断想要的数据格式是什么
if(options.dataType==="json"){
// 如果是json，就将数据先转为json对象
res = JSON.parse(res);
}
/
/ 调⽤成功想执⾏的函数
options.success(res);
}else{ // 请求失败了
}
}
}
// 发送
hod==="post"){
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send(data);
return;
}
xhr.send();
}
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<title>Document</title>
</head>
<body>
<div>
<span></span>
<table align="center">
<caption><h2>登录</h2></caption>
<tr>
<td>⽤户名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="登录"></td>
</tr>
</table>
</div>
</body>
<script src="./js/ajax.js"></script>
<script>
注册页面js特效var btn = document.querySelector("input[type='button']");
var usernamein = document.querySelector("input[name='username']");
var passwordin = document.querySelector("input[name='password']");
btn.addEventListener("click",login);
function login(){
var username = im();
var password = im();
// 验证数据
var usernameRule = /^(\w|[\u4e00-\u9fa5]){2,12}$/;
var passwordRule = /^[a-zA-Z0-9]{6,16}$/;
if(!st(username)){
alert("⽤户名必须是2~12位的数字、字母、下划线或汉字");
return false;
}
if(!st(password)){
alert("密码必须是6~16的数字、字母");
return false;
}
//调⽤函数发送ajax
//⾥⾯的username是键值对，其实是username:username
sendAjax({
url:"login.php",
method:"post",
data:{username,password},
dataType:"json",
success:res=>{
a.status===201){
a.msg);
location.assign("home.html");
}else{
a.msg);
return false;
}
}
});
}
</script>
</html>
/*********************** 这是请求⽰例 **************************/
/*
sendAjax({
url:"demo.php",
method:"post",
success:function(res){
console.log(res);
},
dataType:"json",
async:true,
data:{
username:"张三",
sex:"⼥"
}
});
sendAjax({method,url,async,data,datatype,success})
*/
这个ajax⾥⾯是⽤⼀些简单的if判断去对数据进⾏判断的，然后有需要的朋友可以过来看看哦
之后直接引⽤这个ajax函数直接写出登录注册功能，因为后台请求数据，我们是⽤php这个⼯具进⾏操作的。所以代码中会出现.php⽂件；
三、注册页⾯样式，样式中
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<title>Document</title>
</head>
<body>
<div>
<span></span>
<table align="center">
<caption><h2>登录</h2></caption>
<tr>
<td>⽤户名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="登录"></td>
</tr>
</table>
</div>
</body>
<script src="./js/ajax.js"></script>
<script>
var btn = document.querySelector("input[type='button']");
var usernamein = document.querySelector("input[name='username']");
var passwordin = document.querySelector("input[name='password']");
btn.addEventListener("click",login);
function login(){
var username = im();
var password = im();
/
/ 验证数据
var usernameRule = /^(\w|[\u4e00-\u9fa5]){2,12}$/;
var passwordRule = /^[a-zA-Z0-9]{6,16}$/;
if(!st(username)){
alert("⽤户名必须是2~12位的数字、字母、下划线或汉字");
return false;
}
if(!st(password)){
alert("密码必须是6~16的数字、字母");
return false;
}
/
/调⽤函数发送ajax
//⾥⾯的username是键值对，其实是username:username
sendAjax({
url:"login.php",
method:"post",
data:{username,password},
dataType:"json",
success:res=>{
a.status===201){
a.msg);
location.assign("home.html");
}else{
a.msg);
return false;
}
}
});
}
</script>
</html>
之后注册的php页⾯代码为：
<?php
header("content-type:text/html;charset=uft8");
//接收数据
$username = $_POST["username"];
$password = $_POST["password"];
$tel = $_POST["tel"];
$email = $_POST["email"];
// var_dump($username,$password,$tel,$email);
//连接数据库
$con = mysqli_connect("localhost","root","root","test");
mysqli_query($con,"set names utf8");
$res = mysqli_query($con,"select * from user where username='$username'");
/
/提取数据
$row = mysqli_fetch_assoc($res);
if($row){
// ⽤户名已经存在
$arr = [
"meta"=>[
"status"=>101,
"msg"=>"⽤户名被占⽤"
],
"data"=>null
];
}else{
$res = mysqli_query($con,"insert user(username,password,tel,email) values('$username','$password',$tel,'$email')"); if($res){
// 注册成功
$arr = [
"meta"=>[
"status"=>201,
"msg"=>"注册成功"
],
"data"=>null
];
}else{
// 注册失败
$arr = [
"meta"=>[
"status"=>301,
"msg"=>"注册失败"
],
"data"=>null
];
}
}
echo json_encode($arr);
四、注册成功后，开始了登录页⾯的样式，登录页⾯⽐注册页⾯结构要少⼀些，代码如下：
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<title>Document</title>
</head>
<body>
<div>
<span></span>
<table align="center">
<caption><h2>登录</h2></caption>
<tr>
<td>⽤户名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论