ajax用户登录注册

首先在服务器环境下运行，访问php接口
调用封装好的Ajax方法
本·文路径尚存有问题
前端js操作代码：

<body>
<div class="form">  <p>账号：<input type="text" class="user"></p>  <p>密码：<input type="text" class="pass"></p>  <p>    <button class="login">登录</button>    <button class="register">注册</button>  </p>
</div>
<script src="../代码/utils.js"></script>
<script>
var user = $1('.user')
var pass = $1('.pass')
var login = $1('.login')
var register = $1('.register')
// 登录login.onclick = function (){  var us = user.value  var ps = pass.value// 验证  空值判断  if (!us || !ps) {    alert('账号或密码不能为空')    return  }// 提交数据  数据接口⭐⭐⭐后端数据库  ajax({    //参照接口文档说明    url: 'http://localhost/day24/data/user.php',    type: 'post',    data: {      user: us,      pass: ps,      type: 'login',    },    //返回值    dataType: 'json',    success: function (json){      alert(json.msg)    },    //错误弹出状态码    error:function (code){      alert(code)    }  })
}// 注册
register.onclick = function (){  var us = user.value  var ps = pass.value// 验证  if (!us || !ps) {    alert('账号或密码不能为空')    return  }// 提交数据  ajax({    url: './data/user.php',    type: 'post',    data: {      user: us,      。pass: ps,      type: 'add',    },    dataType: 'json',    success: function (json){      alert(json.msg)    },    error:function (code){      alert(code)    }  })
}</script>
</body>

后端数据接口

<?php
/* 接口说明文档
url: './data/user.php'
type: post
参数：user   用户账号      pass  用户密码      type  登录或注册          = login 登录          = add   注册 返回值示例：{"err":0,"msg":"登录成功"}
*/// 允许任何来源header("Access-Control-Allow-Origin:*");
// 设置响应头信息header('Content-Type:text/html;charset=utf-8');$user = $_POST['user'];$pass = $_POST['pass'];//判断登录还是注册$type = $_POST['type'];// 连接数据库$link = mysqli_connect('localhost','root','123456','mysql');if (!$link) {  // die可以返回数据json字符串  die('{"err":-1,"msg":"连接失败"}');}
// 控制判断用户账号空值
if (!$user || !$pass || !$type) {  die('{"err":-2,"msg":"参数错误"}');
} else {// 登录  if ($type === 'login') {    // 查询sql语句  是否存在    $login_sql = "select * from account where username='$user' and password='$pass'";    // 执行sql语句   $login_res保存查询结果    $login_res = mysqli_query($link,$login_sql);    //解析所有数据  1返回关联数组    $login_arr = mysqli_fetch_all($login_res,1);    //判断登录成功或失败    if (count($login_arr) > 0) {      echo '{"err":0,"msg":"登录成功"}';    } else {      echo '{"err":-3,"msg":"账号或密码错误"}';    }  }  // 注册  if ($type === 'add') {    // 先查询注册的账号是否已存在    $query_sql = "select * from account where username='$user'";    $query_res = mysqli_query($link,$query_sql);    $query_arr = mysqli_fetch_all($query_res,1);    if (count($query_arr) > 0) {      echo '{"err":-4,"msg":"账号已被占用"}';    } else {      // 可以注册，插入数据      $insert_sql = "insert into account(username,password) values('$user','$pass')";      mysqli_query($link,$insert_sql);      $num = mysqli_affected_rows($link);      f ($num > 0){        echo '{"err":1,"msg":"注册成功"}';      } else {        echo '{"err":-5,"msg":"注册失败"}';      }    }  }
}
// 关闭连接
mysqli_close($link);
?>

ajax用户登录注册相关推荐

day14【前台】用户登录注册
day14[前台]用户登录注册 1.会员登录框架 2.发送短信(测试) 2.1.去哪儿找API 上阿里云:直接搜索[短信接口] 随便找一个就行,往下翻有API接口的使用方法 2.2.测试API 2.2 ...
[golang gin框架] 29.Gin 商城项目-用户登录,注册操作
一.用户登录,注册界面展示说明先看登录,注册界面以及相关流程,再根据流程写代码,一般网站的登录,注册功能都会在一个页面进行操作,还有的是在几个页面进行操作,这里讲解在几个页面进行注册的操作,步骤如下 ...
java实现用户登录注册功能(用集合框架来实现)
需求:实现用户登录注册功能(用集合框架来实现) 分析: A:需求的类和接口 1.用户类 UserBean 2.用户操作方法接口和实现类 UserDao UserDaoImpl 3.测试类 UserTe ...
java实现登录注册案例_Java基于IO版实现用户登录注册的案例
下面小编就为大家带来一篇基于IO版的用户登录注册实例(Java).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧今天学的是用户登录注册功能. 4个包: itcast.c ...
基于Servlet+JSP+JavaBean开发模式的用户登录注册
基于Servlet+JSP+JavaBean开发模式的用户登录注册一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复 ...
Codeigniter 用户登录注册模块
Codeigniter 用户登录注册模块以下皆是基于Codeigniter + MySQL 一.要实现用户登录注册功能,首先就要和MySQL数据库连接,操作流程如下: CI中贯彻MVC模型,即Mod ...
javaweb学习总结(二十二)——基于Servlet+JSP+JavaBean开发模式的用户登录注册
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
javaweb学习总结(二十二)：基于Servlet+JSP+JavaBean开发模式的用户登录注册
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
javaweb学习总结——基于Servlet+JSP+JavaBean开发模式的用户登录注册
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...

ajax用户登录注册

ajax用户登录注册相关推荐

最新文章

热门文章