今天写的是登录注册到数据库的小案例,利用ajax技术实现
首先介绍下Ajax:
是JavaScript提供的,与后端进行数据交互的方法
之前使用的form表单和a超链接,都是HTML的数据交互方法
优点:
1,不用页面跳转,就可以完成数据交互
2,可以减轻服务器压力
步骤:
1,创建ajax请求实例化对象
2,设定请求相关信息
3,发送请求
4,接收响应
案例分为几个文件,具体如下:
首页内容页面(包括登录)
此页面实现了登录一次就不能再点击登录,只有退出登录判断cookie不存在时才可以再次点击登录按钮
同样登录成功才会设置cookie,并且只有存在cookie时才能跳转其他页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#btns {
margin: 40px 100px;
}
#login {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
display: none;
background: rgba(0, 0, 0, .4);
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<div id="btns">
<h1>我是首页</h1>
<button name="reg">注册</button><br>
<button name="login">登录</button><br>
<button name="exit">退出登录</button><br>
<button name="pay">购物车</button>
<div id="login">
账号: <input type="text"><br>
密码: <input type="password"><br>
<button name="login2">登录</button>
</div>
</div>
<script src="/utils.js"></script>
<script>
const oBtns = document.querySelector("#btns");
const oDiv = document.querySelector("#login");
const oLogin = document.querySelector("[name='login']");
// 先得到cookie进行验证,不存在就要重新登录
const obj = Utils.getCookie();
// console.log(obj);
if (obj.login === '1') {
// 说明登录成功,就不能再点击登录按钮了
oLogin.disabled = true;
}
// 事件委托
oBtns.addEventListener('click', (e) => {
// 先确定点击的是button
if (e.target.tagName == "BUTTON") {
// 在判断点击的是哪个按钮,注册按钮
if (e.target.getAttribute('name') === "reg") {
window.location.href = './reg.html';
}
if (e.target.getAttribute('name') === "login") {
oDiv.style.display = 'block';
// 说明登录成功,就不能再点击登录按钮了
oLogin.disabled = true;
}
// 退出登录,删除cookie
if (e.target.getAttribute('name') === "exit") {
Utils.setCookie('login', '1', - 1);
oLogin.disabled = false;
}
// 进入支付页面
if (e.target.getAttribute('name') === "pay") {
if (obj.login === '1') {
// 有cookie并且正确就跳转支付页面
window.location.href = './pay.html';
}
else {
// 如果没有login,证明还没有登录
// 弹出确认框 询问是否要跳转值登录页面
// 点击确定 返回值是true 点击取消 返回值是false
let bool = window.confirm('您还没有登录,点击确定跳转登录页面');
// 如果是 true,跳转至首页面进行登录,否则不做任何操作
if (bool === true) {
window.location.href = 'index.html';
}
}
}
// 登录按钮
if (e.target.getAttribute('name') === "login2") {
// 获取输入的登录账号密码
let loginName = document.querySelectorAll('input')[0].value;
let loginPwd = document.querySelectorAll('input')[1].value;
Utils.postAjaxSend('./login.php', fun, `loginName=${loginName}&loginPwd=${loginPwd}`);
// 接收到响应体内容后执行的回调函数
function fun(str) {
if (str == '1') {
// 登录成功
// 弹出提示框,登录成功
window.alert('您登录成功了');
// 设定一个登录cookie,10分钟
Utils.setCookie('login', '1', 600);
// 让登录div再次隐藏
oDiv.style.display = 'none';
} else {
// 登录失败的提示代码
window.alert('您登录失败,请您继续玩命登录');
}
}
}
}
});
</script>
</body>
</html>
注册页面文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input,
button {
height: 30px;
margin: 20px 0;
font-size: 20px;
}
button {
margin: 0 20px;
}
span[name^="promptInfo"] {
margin-left: 30px;
}
span[name="verifiCode"] {
margin-left: 20px;
}
</style>
</head>
<body>
登录账号:<input type="text" name="loginAccount" placeholder="请输入账号" required maxlength="16">
<span name="promptInfo"></span><br>
登录密码:<input type="password" name="loginPassword" placeholder="请输入密码" required> <span name="promptInfo1"></span><br>
再次输入:<input type="password" name="loginPassword1" placeholder="请再次输入密码" required><br>
验 证 码: <input type="text" name="inputVerifiCode" required><span name="verifiCode"></span><button
type="button">看不清,重新刷新</button><span name="promptInfo2"></span><br>
<input type="submit" value="注册">
<input type="reset" value="重置">
<div name="msg"></div>
<script src="/utils.js"></script>
<script>
var promptInfo = document.querySelector("[name='promptInfo']");// 账号提示信息的span
var promptInfo1 = document.querySelector("[name='promptInfo1']");// 密码提示信息的span
var promptInfo2 = document.querySelector("[name='promptInfo2']");// 验证码错误提示信息的span
var loginAccount = document.querySelector("[name='loginAccount']");// 登录账号
var loginPassword = document.querySelector("[name='loginPassword']");//登录密码
var loginPassword1 = document.querySelector("[name='loginPassword1']");// 确认登录密码
var verifiCode = document.querySelector("[name='verifiCode']");// 自动生成验证码
var inputVerifiCode = document.querySelector("[name='inputVerifiCode']");// 输入验证码
var oForm = document.querySelector("form");
var btn = document.querySelector("button");
var regBtn = document.querySelector("[type='submit']"); // 注册按钮
// 点击更新随机验证码
btn.onclick = function () {
verifiCode.innerHTML = Utils.randomVerifiCode(Utils.getRandomColor);
}
// 提前调用显示在网页
btn.onclick();
// 获取焦点时,在span标签中输入提示
loginAccount.onfocus = function () {
promptInfo.innerHTML = "请您输入账号,不能为空";
}
// 获取焦点时,在span标签中输入提示
loginPassword.onfocus = function () {
promptInfo1.innerHTML = "请您输入密码,不能为空";
}
// 注册验证
regBtn.addEventListener('click', () => {
// 密码和确认密码验证
if (loginPassword.value !== loginPassword1.value) {
promptInfo1.style.color = "red";
promptInfo1.innerHTML = '您两次输入的密码不一样,请重新输入';
return;
}
// 验证码确认
if (inputVerifiCode.value.toLowerCase() !== verifiCode.innerText.toLowerCase()) {
promptInfo2.style.color = "red";
promptInfo2.innerHTML = '您输入的验证码错误,请重新输入';
return;
}
// 验证成功,发送数据请求
Utils.postAjaxSend('./reg.php', fun, `regName=${loginAccount.value}®Pwd=${loginPassword.value}`);
});
function fun(str) {
// 获取写入5秒跳转的div标签
const oDiv = document.querySelector('[name="msg"]');
// 如果是注册成功,给出提示,5秒跳转回首页面
// 1,是PHP后台程序,返回的数据内容
if (str == '1') {
let int = 5;
setInterval(() => {
oDiv.innerHTML = `注册成功,${int}秒后跳转首页面`;
int--;
if (int === 0) {
window.location.href = './index.html';
}
}, 1000);
} else {
oDiv.innerHTML = '<span style="color:red">注册失败,用户名被占用,请您选择新的用户名</span>';
}
}
</script>
</body>
</html>
登录php文件代码
<?php
$loginName = $_POST['loginName'];
$loginPwd = $_POST['loginPwd'];
// 连接数据库
$link = mysqli_connect('127.0.0.1', 'root', 'root', 'nz2002', '3306');
// sql语句
$sql = "SELECT * FROM `user` WHERE `username`='{$loginName}' AND `userpwd`='{$loginPwd}'";
// 执行sql语句
$ret = mysqli_query($link, $sql);
// 得到有效数据
$arr = mysqli_fetch_all($ret, MYSQLI_ASSOC);
// 有数据登录成功
if (count($arr) !== 0) {
echo '1';
} else {
echo "0";
}
mysqli_close($link);
注册php文件代码
<?php
$regName = $_POST['regName'];
$regPwd = $_POST['regPwd'];
// 连接数据库
$link = mysqli_connect('127.0.0.1', 'root', 'root', 'nz2002', '3306');
// sql语句
$sql = "INSERT INTO `user` (`username`,`userpwd`) VALUES ('{$regName}','{$regPwd}')";
// 执行sql语句,成功返回true
$ret = mysqli_query($link, $sql);
// 注册成功输出1
if ($ret) {
echo '1';
} else {
echo "0";
}
mysqli_close($link);
封装多方法代码utils.js文件
// 定义一个变量封装几个函数,返回几个对象函数,直接调用
var Utils = (function () {
return {
// 对象名(函数名)
setStyle: function (elem, style) {
for (let prop in style) {
elem.style[prop] = style[prop];
}
},
// 参数:透明度(不写默认是1,不透明)
getRandomColor: function (alpha) {
// isNaN不是数字返回true
if (alpha > 1 || isNaN(alpha) || alpha < 0) {
alpha = 1;
}
var color = 'rgba(';
for (var i = 0; i < 3; i++) {
var str = parseInt(Math.random() * 256);
color += str + ',';
}
color += alpha + ')';
return color;
},
// 随机验证码
randomVerifiCode: function (callBack) {
var str = "0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
var str1 = "";
for (let i = 0; i < 6; i++) {
// 随机旋转
var h = Math.random() < 0.5 ? -1 : 1;
var zhuan = Math.random() * h * 30;
// 随机字体大小
var randomFontSize = parseInt(Math.random() * 15) + 20;
var num = parseInt(Math.random() * str.length);
if (str1.indexOf(str[num]) != -1) {
i--;
continue;
}
str1 += `<span style="transform:rotateZ(${zhuan}deg);display:inline-block;color:${callBack()};font-size:${randomFontSize}px;margin-left:5px;">${str[num]}</span>`;
}
return str1;
},
// 多属性移动函数
move: function (elem, obj, callBack) {
let time = {};
for (let type in obj) {
let oldVal = 0;
if (type === "opacity") {
// 小数不能准确比较大小,所以扩展一百倍在加减最后比较,输入参数时也是扩大后的值
oldVal = parseFloat(window.getComputedStyle(elem)[type]) * 100;
}
else {
oldVal = parseInt(window.getComputedStyle(elem)[type]);
}
time[type] = setInterval(() => {
// 分几步完成目标移动
let val = (obj[type] - oldVal) / 5;
// 大于0向上取整,小于0向下取整,取得都是1或-1进行加减
val = val > 0 ? Math.ceil(val) : Math.floor(val);
oldVal += val;
if (type === "opacity") {
// 透明度写入时需要缩小一百倍
elem.style[type] = oldVal / 100;
}
else {
elem.style[type] = oldVal + 'px';
}
if (oldVal == obj[type]) {
// 移动到目标位置后清除定时器
clearInterval(time[type]);
// 删除定时器列表中的对应编号属性
delete (time[type]);
}
if (Object.keys(time) == 0) {
// 所有样式执行完成后再执行回调函数
callBack();
}
}, 30);
}
},
// 设置cookie,参数是键值对和存储时效(单位是秒)
setCookie: function (key, val, time) {
// 得到当前时间
const nowTime = new Date();
// 浏览器时间比当前时间少八个小时,都是ms毫秒相加减,所以先获取当前时间戳
// 得到当前浏览器时间
let t = nowTime.getTime() - (8 * 60 * 60 * 1000);
// 设置达到时效后的总共时间毫秒数
t = t + time * 1000;
// 时间戳设定回时间对象,就可以得到以后到达的时间值
nowTime.setTime(t);
// 判断是否传time参数,不传参默认就算session会话时效,页面一关就删除cookie,数据就会消失
let a = (time === undefined) ? '' : nowTime;
// 写入到cookie中
document.cookie = `${key}=${val};expires=${a}`;
},
getCookie: function () {
// 得到cookie字符串
let cookieStr = document.cookie;
// 先转换为数组
const arr = cookieStr.split('; ');
const obj = {};
// 循环遍历,继续分割
arr.forEach((val, key) => {
const newArr = val.split('=');
obj[newArr[0]] = newArr[1];
});
// console.log(obj);
return obj;
},
// get方式发送ajax请求,参数一个是跳转路径,一个是接收到响应体内容后执行的函数
getAjaxSend: (url, callBack) => {
// 创建ajax对象
const xhr = new XMLHttpRequest();
// 配置请求相关信息
xhr.open('get', url);
// 开始发送请求
xhr.send();
// 接收到响应体内容
xhr.onload = () => {
callBack(xhr.response);
};
},
// post方式发送ajax请求,参数一个是跳转路径,一个是接收到响应体内容后执行的函数,一个是发送的字符串
postAjaxSend: (url, callBack, dataStr) => {
// 创建ajax对象
const xhr = new XMLHttpRequest();
// 配置请求相关信息
xhr.open('post', url);
// 先设定请求头
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
// 开始发送请求
xhr.send(dataStr);
// 接收到响应体内容
xhr.onload = () => {
console.log(xhr);
callBack(xhr.response);
};
},
}
})();