• 注册信息与后台的交互


    案例:

    1.输入用户名的时候要判断后台数据库中有没有要注册的用户名,有的话返回用户名被使用;
    2.判断两次密码相不相同;
    3.点击注册判断数据库是否插入数据信息;
    html:
     1 <!DOCTYPE html>
     2 <htmllang="en">
     3 <head>
     4 <metacharset="UTF-8"/>
     5 <title>注册</title>
     6 <styletype="text/css">
     7 span{
     8 color: red;
     9 }
    10 </style>
    11 </head>
    12 <body>
    13&nbsp;&nbsp;号:<inputtype="text"name="user"placeholder="*必填"><span></span><br/><br/>
    14&nbsp;&nbsp;码:<inputtype="password"name="pwd"placeholder="*必填"><br/><br/>
    15 确定密码:<inputtype="password"name="pwd"placeholder="*必填"><span></span><br/><br/>
    16 <inputtype="button"value="注册">
    17 </body>
    18 <scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    19 <scripttype="text/javascript">
    20 var $btn = $("input[type=button]");
    21 var $iptName = $("input[type=text]");
    22 var $iptPwd = $("input[type=password]");
    23 var $span = $("span");
    24 $iptName.on("input",function(){
    25 $.ajax({
    26 type:"post",
    27 url:"2-register.php",
    28 data:{"action":"select","user":$iptName.val()},
    29 dataType:"json",
    30 success:function(data){
    31 // console.log(data);
    32 // $span.eq(0).text("名字可以使用!");
    33 if(data.error =="0"){
    34 $span.eq(0).text("被使用!");
    35 returnfalse;
    36 }else{
    37 $span.eq(0).text("可以使用!");
    38 }
    39 },
    40 });
    41 });
    42 $iptPwd.on("input",function(){
    43 if($iptPwd.eq(0).val()==""||$iptPwd.eq(1).val()==""){
    44 $span.eq(1).text("不能为空!");
    45 returnfalse;
    46 }
    47 elseif($iptPwd.eq(0).val()== $iptPwd.eq(1).val()){
    48 $span.eq(1).text("可以使用!");
    49 returnfalse;
    50 }
    51 elseif($iptPwd.eq(0).val()!= $iptPwd.eq(1).val()){
    52 $span.eq(1).text("不一致!");
    53 returnfalse;
    54 }
    55 });
    56 $btn.on("click",function(){
    57 $.ajax({
    58 type:"post",
    59 url:"2-register.php",
    60 data:{"action":"insert",
    61 "user":$iptName.val(),
    62 "pwd":$iptPwd.eq(1).val(),
    63 },
    64 dataType:"json",
    65 success:function(data){
    66 console.log(data);
    67 if(data.insert =="0"){
    68 alert("注册成功!");
    69 }else{
    70 alert("注册失败!");
    71 returnfalse;
    72 }
    73 // if(data)
    74 // alert("注册成功!");
    75 },
    76 });
    77 });
    78 </script>
    79 </html>
    View Code
    php:
     1 <?php
     2 // 设置字符集
     3 header("Content-type:text/html;charset=utf-8");
     4 // 获取前端的数据
     5 $action = $_POST['action'];
     6 // 建立连接
     7 $conn =@mysqli_connect("localhost","root","","mess");
     8 // 设置编码
     9 $conn -> query("set names utf8");
    10 // 先判断该用户名是否已经被注册了
    11 // 先进行查询操作
    12 // 判断前端页面的请求是插入数据还是查询数据
    13 switch($action){
    14 case'select':
    15 $user = $_POST['user'];//用户名
    16 $sql ="SELECT name FROM users WHERE name='{$user}'";
    17 $result = $conn -> query($sql);
    18 if(mysqli_num_rows($result)>0){
    19 echo '{"error":"0"}';
    20 // exit;
    21 }else{
    22 echo '{"error":"1"}';
    23 };
    24 break;
    25 case'insert':
    26 $user = $_POST['user'];//用户名
    27 $pwd = $_POST['pwd'];//密码(通常会对密码进行加密)md5加密
    28 $sql ="INSERT INTO users (name,pwd) VALUES ('{$user}','{$pwd}')";
    29 $conn ->query($sql);
    30 if(mysqli_affected_rows($conn)>0){
    31 echo '{"insert":"0"}';
    32 }else{
    33 echo '{"insert":"1"}';
    34 }
    35 break;
    36 default:
    37 alert("写的什么!");
    38 break;
    39 }
    40 ?>
    View Code
    效果:



  • 相关阅读:
    堆和栈的区别(转)
    conversion to dalvik format failed with error 1的解决办法
    eclipse最实用快捷键
    java socket编程(转)
    Android 面试总结
    Android横竖屏总结(转)
    Android布局文件属性笔记(转)
    常用数据结构有哪些(转)
    经常用到的Eclipse快捷键(转)
    url编码转换
  • 原文地址:https://www.cnblogs.com/ChenChunChang/p/6625440.html
Copyright © 2020-2023  润新知