집 >백엔드 개발 >PHP 튜토리얼 >PHP+javascript로 사용자 등록 모듈 구현(소스코드 첨부)

PHP+javascript로 사용자 등록 모듈 구현(소스코드 첨부)

烟雨青岚앞으로: 2020-06-09 10:42:334706검색

APhp + JavaScript 사용자 등록 모듈 구현(관련 소스 코드)

I. 기능 소개

사용 언어

: HTML + JavaScript + AJAX + PHP

백엔드 데이터베이스

: MySQL (* 스타일은 여기에 관련되지 않습니다)

성공적인 등록 프로세스:

① 사용자 정보를 수집하기 위한 양식을 제공하는 등록 페이지(register.html)입니다.

② 제출 후, Register.php 페이지로 이동하여 PHP를 사용하여 등록 정보를 데이터베이스에 추가합니다.

2. 구현 코드

(1)

MySql 데이터베이스에 사용자 정보 테이블 생성

요구 사항: 사용자 정보 테이블 생성:

코드:

CREATE TABLE xxx_user(
  uid INT PRIMARY KEY AUTO_INCREMENT,
  uname VARCHAR(32),
  upwd VARCHAR(32),
  email VARCHAR(64),
  phone VARCHAR(16),
  gender INT     #性别  0-女  1-男
);

(2 ) HTML 페이지 레이아웃 코드

요구 사항:

● 로그인 비밀번호 - 비밀번호 상자 ● 비밀번호 확인 - 비밀번호 상자

● 사용자 사서함 - 이메일

● 연락처 정보 - 텍스트 상자

● 사용자 성별 - 드롭다운 상자

● 등록 버튼

code

<form action="./data/users/register.php" method="post">
<!--
1.注册信息不用异步加载，直接提交表单；失去焦点时验证用户名密码是否正确，再用ajax异步加载数据；
2.form表单作用：收集用户信息并提交给服务器；
3.属性action作用：定义表单被提交时发生的动作，通常定义的是服务器上处理程序的地址(url)，提交到注册的php文件，默认提交给本页；
4.属性method作用：指定表单数据的提交方式。
  get(默认值)——明文提交，待提交的数据会显示在地址栏上；
  post——隐式提交，提交的数据不会显示在地址栏上。
-->
    <!--控件提交信息，嵌套在form标记里面-->
    <!--登录名称-文本框-->
    <p>
        登录名称：<input type="text" id="uname" name="uname" onblur="check_name()">
        <!--提示用户名是否一致的位置-->
        <span id="uname-show"></span>
        <!--提交数据时提交name属性的值，点击submit时，name属性通过表单form提交数据，同步提交数据-->
    </p>
    <!--登录密码-密码框-->
    <p>
        登录密码：<input type="password" id="upwd" name="upwd">
        <!--name值与id值可以重复，name值用于提交给服务器，id值在前端用-->
    </p>
    <!--确认密码-密码框-->
    <p>
        确认密码：<input type="password" id="cpwd" name="cpwd" onblur="check_pwd()">
        <!--onblur为失去焦点属性，调用判断密码是否一致的函数-->
        <!--用于提示两次密码是否一致的位置-->
        <span id="pwd-show"></span>
    </p>
    <!--用户邮箱-电子邮件-->
    <p>
        电子邮箱：<input type="email" name="email">
        <!--type="email" 可做简单的格式验证-->
    </p>
    <!--联系方式-文本框-->
    <p>
        手机号码：<input type="text" name="phone">
    </p>
    <!--用户性别-下拉框-->
    <p>
        用户性别：
        <select name="gender">
            <option value="1">男</option>
            <option value="0">女</option>
        </select>
        <!--下拉列表和选项，往数据库中插入的是value的值-->
    </p>
    <!--注册按钮-->
    <p>
        <input type="submit" value="注册">
        <!--submit按钮的表单提交数据，是同步访问数据的方式-->
    </p>
</form>

(3) Register.php 만들기

요구 사항:

① init.php에서 재사용된 연결 데이터베이스를 캡슐화합니다.

코드는 다음과 같습니다.

<?php
//data/init.php
//创建到服务器的连接，连接数据库
$conn=mysqli_connect("127.0.0.1","root","","knewone",3306);
$sql="SET NAMES UTF8";
mysqli_query($conn,$sql);

요구 사항: ② Register.html에서 제출한 데이터를 받아 데이터베이스에 삽입합니다. 그런 다음 힌트를 주세요

코드는 다음과 같습니다.

<?php
//data/users/register.php
#1.获取请求提交的数据
    $uname=$_REQUEST["uname"];
    //uname值就是前端页面中name属性的值
    $upwd=$_REQUEST["upwd"];
    //确认密码不用获取，获取一个密码就行
    $email=$_REQUEST["email"];
    $phone=$_REQUEST["phone"];
    $gender=$_REQUEST["gender"];
#2.连接到数据库
    require("../init.php");
#3.拼sql语句并执行
    $sql="insert into xxx_user(uname,upwd,email,phone,gender)values(&#39;$uname&#39;,&#39;$upwd&#39;,&#39;$email&#39;,&#39;$phone&#39;,&#39;$gender&#39;)";
    //字段值 外面用双引号，里面用单引号
    $result=mysqli_query($conn,$sql);
    //执行sql语句
#4.根据执行结果给出响应
    if($result==true){ //函数返回值
        echo "注册成功";
    }else{
        echo "注册失败";
    };

(4) JavaScript 코드

요구 사항:

① 재사용 가능한 함수 캡슐화

코드는 다음과 같습니다.

<script>
//1.封装函数，获取id值
function $(id){
  return document.getElementById(id);
}
//2.创建xhr对象
function createXhr(){
    var xhr=null;
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest(); //标准创建
    }else{
        //IE8以下的创建方式
        xhr=new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
}
</script>

요구 사항 :

② 프론트엔드 구현 이 페이지는 사용자 이름의 반복성과 두 비밀번호의 일치 여부를 확인하는 기능을 완성합니다.

코드는 다음과 같습니다.

<script src="./js/common.js"></script>
<script>
    //1.完成用户名称的重复性验证（异步，检查数据库中是否已存在当前用户名）
    //异步请求数据，因为还要输入下面的数据，不能跳转到php页面去验证
    function check_name(){
        //1.创建XHR对象 创建异步对象
        var xhr=createXhr(); //调用common.js中封装好的函数
        //2.创建请求
        var uname=$("uname").value;
        //获取输入框里的值，把用户名传到后端，再查询
        var url="./data/users/check-name.php?uname="+uname;
        xhr.open("get",url,true);
        //查询用户名称，用get方法就行，去数据库查询，看用户名是否已经存在
        //查询用get就行，向服务器提交数据时再用post
        //3.设置回调函数，监听状态
        //参数true，异步
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4 && xhr.status==200){
            //判断状态，xhr请求状态为4，表示接收响应数据成功；当status的值是200的时候，表示服务器已经正确的处理请求以及给出响应
            $("uname-show").innerHTML=xhr.responseText;
            //提示内容
            };
        };
            //4.发送请求
            xhr.send(null);
            //get请求，参数写null
        }
//2.定义函数，判断两次密码是否一致
//当确认密码框失去焦点时，验证两次输入的密码是否一致，并给出提示（通过/密码不一致）
    //给upwd 和 cpwd 加id
    function check_pwd(){
        //1.获取两个密码框的值
        var upwd=$("upwd").value; 
        //$("upwd") 获取id值，函数在common.js中封装
        var cpwd=$("cpwd").value;
        if(upwd==cpwd && upwd!=""){ 
        //判断是否相等，且密码不为空
            $("pwd-show").innerHTML="通过";  
            //提示到span中，用innerHTML
        }else{
            $("pwd-show").innerHTML="两次密码输入不一致";
        };
    };
</script>

(5) 여부를 확인하는 PHP 코드 사용자 이름이 반복됩니다

기능:

프런트 엔드 전송 uname 값을 수락하고 데이터베이스에 동일한 이름이 있는지 쿼리하고 반환 프롬프트를 제공합니다.

코드는 다음과 같습니다.

<?php
//data/users/check-name.php
#1.连接数据库
  require("../init.php");
#2.接收前端传过来的uname
  $uname=$_REQUEST["uname"];
#3.拼接sql，并查询uname是否存在
  $sql="SELECT * FROM xxx_user uname=&#39;$uname&#39;";
  $result=mysqli_query($conn,$sql);
#4.根据查询的结果输出相应
  $row=mysqli_fetch_row($result);
  //抓取一条数据，即当前uname对应的数据
  if($row==null){
  //如果$row为空，即数据库中没有相同的用户名存在
    echo "通过";
  }else{
    echo "用户名称已存在";
  };

감사합니다 읽어주셔서 감사합니다. 코드를 읽으면 도움이 되기를 바랍니다.

이 기사는 https://blog.csdn.net/weixin_38840741/article/details/80030792

PHP+javascript로 사용자 등록 모듈 구현(소스코드 첨부)

관련 기사