Maison > Article > développement back-end > PHP+javascript implémente le module d'enregistrement des utilisateurs (code source ci-joint)
php+javascript implémente le module d'enregistrement des utilisateurs (avec code source)
1. 🎜 >
Utilisation du langage : html + javascript + ajax + php
Base de données backend : MySQL
(* Pas ici Style impliquant)Processus d'inscription réussi :
① Page d'inscription (register.html), qui fournit un formulaire pour collecter des informations sur les utilisateurs. ② Après la soumission, accédez à la page register.php et utilisez php pour ajouter les informations d'enregistrement à la base de données.2. Code d'implémentation
(1) Créer une table d'informations utilisateur dans la base de données MySql
Exigences :Créer un tableau d'informations utilisateur :
Code :
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) Code de mise en page HTML
Exigences : Créez un registre.html (non-ajax) et fournissez les contrôles suivants (formulaire) -
● Zone de texte du nom de connexion ● Journal dans Mot de passe - zone de mot de passe ● Confirmer le mot de passe - zone de mot de passe ● E-mail de l'utilisateur - e-mail ● Informations de contact - zone de texte ● Sexe de l'utilisateur - Liste déroulante ● Bouton d'enregistrementCode
<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) Créer un registre.php
Exigences : ① Dans init.php, encapsuler la base de données de connexion réutilisée
Le code est le suivant :
<?php //data/init.php //创建到服务器的连接,连接数据库 $conn=mysqli_connect("127.0.0.1","root","","knewone",3306); $sql="SET NAMES UTF8"; mysqli_query($conn,$sql);
Exigences : ② Recevez les données soumises par register.html, insérez-les dans la base de données, puis donnez une invite
Le code est le suivant :
<?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('$uname','$upwd','$email','$phone','$gender')"; //字段值 外面用双引号,里面用单引号 $result=mysqli_query($conn,$sql); //执行sql语句 #4.根据执行结果给出响应 if($result==true){ //函数返回值 echo "注册成功"; }else{ echo "注册失败"; };
(4) Code JavaScript
Exigences : ① Encapsuler les fonctions réutilisables
Le code est le suivant :
<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>
Exigences :② Implémenter la fonction de vérification de la répétabilité des noms d'utilisateur et de la cohérence de deux mots de passe sur la page front-end
Le code est comme suit :
<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) Code PHP pour vérifier si le nom d'utilisateur est répété
Fonction : Accepter la valeur uname depuis le front-end, demandez si le même nom existe dans la base de données et donnez l'invite de retour
Le code est le suivant :
<?php //data/users/check-name.php #1.连接数据库 require("../init.php"); #2.接收前端传过来的uname $uname=$_REQUEST["uname"]; #3.拼接sql,并查询uname是否存在 $sql="SELECT * FROM xxx_user uname='$uname'"; $result=mysqli_query($conn,$sql); #4.根据查询的结果输出相应 $row=mysqli_fetch_row($result); //抓取一条数据,即当前uname对应的数据 if($row==null){ //如果$row为空,即数据库中没有相同的用户名存在 echo "通过"; }else{ echo "用户名称已存在"; };Merci d'avoir lu, J'espère que vous pourrez bénéficier de la lecture du code. Cet article est reproduit à partir de : https://blog.csdn.net/weixin_38840741/article/details/80030792
Tutoriel PHP "
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!