ajax
访问php文件,获取数据php文件中输出的返回数据。最终使用js操作编写所需呈现给用户的效果。若用户前端登录,登录成功以后将信息保存至cookie
中。后面通过读取cookie
中数据,将首页登录
字更换为用户账户名。连接
,然后填写新建链接中信息(连接名随意取,用户名随意取)。
数据库中新建连接
新建数据库
建立数据库(数据库名可以随意填写,需要注意字符集和排序规则的格式),完了以后点击确定。
新建数据库
新建数据库2
新建表
,填写我们后面所需要用到的数据,一般情况账户名设置为不重复,完了以后ctrl+s
保存设置表名,当然我们也可以最开始就设置好表的名字。
打开建好的数据库
填写表的信息1
设置列不重复
设置表名
php文件
里编写SQL语句操作数据库,做判断将前端数据做返回。//建立连接,选择数据库的conn.php文件
<?php
//链接
mysql_connect("localhost:3306","root","");
mysql_query("set names 'utf8'");
mysql_query("set character set 'utf8'");
mysql_select_db("liyi");
?>
//这个是cors跨域php文件示例,该文件为login.php文件
<?php
//添加请求头
header("Access-Control-Allow-Origin:*");
$username=$_GET["username"];
$password=$_GET["password"];
//链接数据库
require "conn.php";
//编写SQL语句
$sql = "SELECT username,password FROM users WHERE username='$username' AND password='$password'";
$result = mysql_query($sql);
if( $row = mysql_fetch_array($result,MYSQL_ASSOC)){
$r = array("res_code"=>1,"res_err"=>"","res_body"=>$row);
echo json_encode($r);//向前端返回数据
}else{
$r = array("res_code"=>-1,"res_err"=>"用户名或密码错误");
echo json_encode($r);//向前端返回数据
}
mysql_close();
?>
//register.php文件
<?php
//CORS跨域添加请求头
header("Access-Control-Allow-Origin:*");
$username=$_POST["username"];
$password=$_POST["password"];
require "conn.php";
$sql = "INSERT INTO users(username,password) VALUES('$username','$password')";
$result = mysql_query($sql);
if($result){
$arr=array("res_code"=>1,"res_err"=>"");
echo json_encode($arr);//向前端返回数据
}else{
$arr = array("res_code"=>-1,"res_err"=>"错误:".mysql_error());
echo json_encode($arr);//向前端返回数据
}
mysql_close();
?>
jQuery
发起ajax请求
访问php文件
获取返回数据。做登录与注册操作,登录成功我们使用cookie
将用户信息保存至cookie
中。//登录页面代码示例
$.cookie.json=true;//这里使用了jquery中的cookie插件,这个设置是将保存至cookie中的数据为json文本的形式做保存
$("#login").click(function(){
const data = $("#sign_user").serialize();
$.getJSON("http://localhost:80/php2/login.php",data,function(data){
if(data.res_code==1){
$("#prompt").html("登录成功");
location="/index.html";
$.cookie("login_user",data,{path:"/",expires:7});
}else{
$("#prompt").html("用户名或密码错误");
}
})
return false;
})
//当点击注册时
$.cookie.json=true;//这里使用了jquery中的cookie插件,这个设置是将保存至cookie中的数据为json文本的形式做保存
$("#register").click(function(){
const data = $("#register_form").serialize();
//获取验证框的value值
const value= $("#checkout").val();
//判断是否和图片上文字相同
if(value == $(".code").data("content")){
//判断密码和再次输入密码是否相同
if($(".confirm").val()==$(".re-confirm").val()){
//发起ajax请求
$.post("http://localhost:80/php2/register.php",data,function(data){
if(data.res_code==1){
console.log(1)
$(".prompt1").html(`礼易账号注册成功`);
location="/html/login.html";
}else{
$(".prompt1").html(`礼易账号已被注册,请更换账户名`);
}
},"json")
}else if($(".confirm").val()!==$(".re-confirm").val()){
$(".prompt1").html(`两次输入的密码不相同,请再次确认`);
}
}else if(value !== $(".code").data("content")){
$(".prompt1").html(`验证码输入错误,请重新输入`);
}
return false;
})