Ajax配合jQuery和数据库

Ajax配合jQuery和MySQL 实现页面局部刷新直接提交到数据库中减轻服务器的负担无需刷新页面，减少用户实际的等待时间话不多说上图和源代码下面是ajax的代码

登录界面HTML代码需要引入booststrap框架

<!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>登录页面</title><script src="js/jq214.js"></script><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css"><link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css"><link rel="stylesheet" href="css/style.css"><script src="js/ajax.js"></script><script src="js/yanzhengma.js"></script></head><body><div class="denglu"><form class="zujian"><h3>用户登录</h3><div class="form-group"><div class="input-group"><!-- <span></span> --><span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span><input type="text" name="user" class="form-control" placeholder="请输入账号" aria-describedby="basic-addon1" id="btn"></div></div><div class="form-group"><div class="input-group"><span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-lock"></span></span><input type="password" name="password" placeholder="请输入密码" class="form-control" id="btn05" aria-describedby="basic-addon2"></div></div><div class="form-group"><p align="center"><input type="text" name="code" placeholder="请输入验证码" class="form-control col-lg-4" id="btn04"> <span class="yanzm" id="code"></span><span class="yanzm2 " id="click">看不清换一张</span></p></div><div class="btnan"><button id="btn01" onclick="denglu()" class="btn btn-info ">登录</button>&nbsp;<button class="btn btn-info"><a href="zhuce.html ">注册</a></button></div></form></div>
</body></html>

登录界面连接数据库代码以及操作数据库代码

<?php
$servername = "localhost";
$username = "root";
$password = "12345678";
$dbname = "test";
$conn = new mysqli($servername, $username, $password, $dbname);
// 中文字符集
mysqli_query($conn, "set names utf8");
header("content-Type:text/html;charset=utf-8");
// 获取数据
$user=$_GET["user"];
$password=$_GET["password"];
setcookie('user',$user,time()+3600*12);
setcookie('password',$password,time()+3600*12);
// echo'您的用户名是'.$_COOKIE['user'];
// echo'您的密码是'.$_COOKIE['password'];
// die();
$sql="select * from `user` where user='$user' and password='$password'";
// die($sql);
$re=$conn->query($sql);
// 判断用户是否存在
if($re->num_rows > 0){die('登录成功');
}else{die("用户不存在");
}

Ajax代码需要引入jq文件

function denglu() {var user = $('#btn').val();var password = $('#btn05').val();var yzm = $('#btn04').val();if (user == '') {alert('用户名不能为空')$('#btn').foucs()} else if (password == '') {alert('密码不能为空')$('#btn05').foucs()} else if (yzm != $('#code').html()) {alert('验证码错误')$('#btn05').foucs()} else {$.ajax({type: "get",url: "php/denglu.php?user=" + user + "&password=" + password,dataType: "text",success: function(data) {if (data == '登录成功') {window.location.href = "liuyan.html"} else {alert(data);}},error: function(data) {alert("系统出错，请联系开发人员")}});}
}

注册界面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><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/bootstrap.css"><script src="js/jq214.js"></script><script src="js/ajax.js"></script><link rel="stylesheet" href="css/register.css">
</head><body><div class="bd"><div class="ad"><dd style="color: white;font-size: 80px;">用科技</dd><dd style="color: white;font-size: 50px;">让复杂的世界更简单</dd></div><form class="zujian"><div class="left-top"><h3>欢迎注册</h3><p style="font-size: 10px;">已有账号？<span><a href="denglu.html">登录</a></span></p></div><div class="biaodan"><table><tr><td><span>用户</span></td><td><input type="text" name="user" id="username" placeholder="请输入用户名"></td></tr><tr class="jianju"><td><span>密码</span></td><td><input type="password" name="password" id="password" placeholder="密码"></td></tr><tr class="jianju"><td>密码</td><td><input type="password" name="repassword" id="repassword" placeholder="确认密码" required></td></tr></table><div class="button"><p alignn="center"> <button class="btn btn-primary btn-lg btn-block" type="submit" id="btn02" onclick="register()">注册</button></p><span style="font-size: 6px;text-align: center"> <input type="checkbox"> 阅读并接受<a>《百度用户协议》</a>及<a>声明</a></span></div></div></form></div>
</body></html>

注册界面php部分

<?php
$servername = "localhost";
$username = "root";
$password = "12345678";
$dbname = "test";
$conn = new mysqli($servername, $username, $password, $dbname);
// 中文字符集
mysqli_query($conn, "set names utf8");
header("content-Type:text/html;charset=utf-8");// 获取数据
$user = $_GET["user"];
$password = $_GET["password"];
$time = date("Y-m-d H:i:s", time() + 8 * 60 * 60);
// 查询
$sql = "select * from user where user='$user'";
$result = $conn->query($sql);
// echo $result;
// die();
if ($result->num_rows > 0) {die("账户已存在");
} else {$sql = "insert into `user`(user,password,times) values('$user','$password','$time')";// echo $sql;die();$pd = $conn->query($sql);if ($pd) {die('注册成功');} else {die('注册失败');}
};
?>

注册界面Ajax部分

function register() {var user = $('#username').val();var password = $('#password').val();var repassword = $('#repassword').val();if (user == '') {alert('用户名不能为空')} else if (password == '') {alert('密码不能为空')} else if (password != repassword) {alert('两次密码不一致')} else {$.ajax({type: "get",url: "php/zhuce.php?user=" + user + "&password=" + password,dataType: "text",success: function(data) {if (data == '注册成功') {window.location.href = "denglu.html";} else {alert(data);}},error: function(data) {alert("系统出错，请联系开发人员")}});}
}

注册界面css部分

.bd {width: auto;height: auto;
}body {background-image: url(../img/1.jpg);
}.zujian {background-color: #f8f9fa !important;width: 350px;opacity: 0.65;height: 500px;float: right;margin-top: 150px;margin-right: 100px;border-radius: 10px;
}.ad {margin-top: 220px;
}.left-top {margin-left: 40px;
}.left-top p {margin-top: -10px;color: grey;
}input {border-radius: 5px;
}.biaodan {margin-left: 40px;margin-top: 40px;
}span {color: grey;
}.top {margin-top: 20px;
}table {margin-top: -20px;height: 300px;border-collapse: separate;border-spacing: 5px;
}.button {margin-right: 30px;
}.ad {float: left;position: relative;
}

登录页面css代码

body {background-image: url(../img/1.jpg);
}.zujian {width: 300px;height: 280px;background-color: white;opacity: 0.85;margin: auto;margin-top: 200px;border-radius: 5px;padding: 10px;
}.denglu h3 {color: red;text-align: center;padding: 10px;margin-top: 0px;
}a {color: black;
}.btnan {margin-left: 90px;
}.yanzm {background-color: antiquewhite;
}

最后上效果图

Ajax配合jQuery和数据库相关推荐

php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...
首先我们需要先建立好数据库,将一些数据插入进去需要两张表: province:省份表 city: 城市表如图: 然后再在java中建立相关的实体类与之对应再然后,我们就能开始做jdbc的操作了 ...
php ajax操作数据库,php + ajax 实现的写入数据库操作简单示例
本文实例讲述了php+ ajax 实现的写入数据库操作.分享给大家供大家参考,具体如下: 这个是最简单的表单提交延伸:后面有很多需要提交的信息如何快速部署接口此例子是移动端H5页面,使用的是z ...
第一章：AJAX与jQuery
AJAX 第一章:AJAX与jQuery 概念:AJAX = Asynchronous JavaScript And XML(异步的 JavaScript 和 XML).阿贾克斯 AJAX 不是新的编 ...
linux json 写sql注入,sql注入之AJAX（SQL Injection (AJAX/JSON/jQuery)）
sql注入之AJAX(SQL Injection (AJAX/JSON/jQuery)) 0x1 网上搜下没有关于ajax的sql注入文章,这里简单写一下抛砖引玉. 原理自己百度,这里简单说下: 通过 ...
JS原生Ajax和jQuery的Ajax与代码示例
JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式掌握json数据格式方式掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...
html5支持ajax和jQuery吗,使用HTML5文件上传与AJAX和jQuery(Using HTML5 file uploads with AJAX and jQuery)...
使用HTML5文件上传与AJAX和jQuery(Using HTML5 file uploads with AJAX and jQuery) 诚然,Stack Overflow上有类似的问题,但似乎并 ...
Jpetstore——使用AJAX和jQuery改善用户体验1（账号管理模块）
Jpetstore--使用AJAX和jQuery改善用户体验1(账号管理模块) CSDN下载:基于MVC用JSP/Servlet实现JPetStore--使用AJAX和jQuery改善用户体验账号管 ...
ajax的通用写法,ajax的jquery写法和原生写法
一.ajax的简介 Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 同步是指: ...

Ajax配合jQuery和数据库

Ajax配合jQuery和数据库相关推荐

最新文章

热门文章