用ajax和jquery做短信验证和学生管理系统案例

最新推荐文章于 2024-02-18 16:12:58 发布

灯光下的投影

最新推荐文章于 2024-02-18 16:12:58 发布

阅读量431

点赞数 1

分类专栏： ajax 文章标签： ajax template模板引擎 bootstrap框架

本文链接：https://blog.csdn.net/liuyuhua666/article/details/90316061

版权

本文通过实际案例介绍了如何运用Ajax和jQuery进行短信验证的模拟操作，并展示了结合template模板引擎和bootstrap框架搭建的学生管理系统。主要内容包括getCode.php和register.php文件的设置以及前端交互代码的编写。

摘要由CSDN通过智能技术生成

一、短信验证（模拟）：

getCode.php文件：

<?php

header('content-Type:text/json;charset=utf-8');

$mobile = $_GET['mobile'];

$arr = array(
  "18511111111",
  "18511241111",
  "18511111112",
  "18511111113",
  "18511111114",
  "18511111115"
);

if(in_array( $mobile, $arr )){
  $result = array(
    "code" => 101,
    "msg" => $mobile."手机号已经存在",
    "mobile" => $mobile
  );
}else {
  $result = array(
    "code"=>100,
    "msg"=>"验证码发送成功",
    "mobile" => $mobile
  );
}
// sleep(1);

echo json_encode($result, JSON_UNESCAPED_UNICODE);

<?php

header('content-Type:text/html;charset=utf-8');
$name = $_POST['name'];
$pass = $_POST['pass'];
$mobile = $_POST['mobile'];
$code = $_POST['code'];

$arr = array(
  "hcc",
  "hucc",
  "hucong",
  "hucongcong"
);

if( in_array($name, $arr) ){
  $result = array(
    "code"=>101,
    "msg"=>"用户名已经存在",
    "name"=>$name
  );
} else if( $code != "1234" ) {
  $result = array(
    "code"=>102,
    "msg"=>"验证码错误",
    "name"=>$name
  );
}else {
  $result = array(
    "code"=>100,
    "msg"=>"注册成功",
    "name"=>$name
  );
}

sleep(1);

echo json_encode( $result, JSON_UNESCAPED_UNICODE );

前端代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>表单注册</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #f7f7f7;
      }

      ul {
        margin: 0;
        padding: 50px;
        list-style: none;
      }

      .register {
        width: 800px;
        margin: 50px auto;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      li {
        overflow: hidden;
        margin: 20px 0;
      }

      label,
      input {
        display: block;
        float: left;
        height: 46px;
        font-size: 24px;
        box-sizing: border-box;
        color: #333;
      }

      label {
        width: 200px;
        line-height: 46px;
        margin-right: 30px;
        text-align: right;
      }

      input {
        width: 320px;
        padding: 8px;
        line-height: 1;
        outline: none;
        position: relative;
      }

      input.code {
        width: 120px;
      }

      input.sendBt {
        width: 190px;
        margin-left: 10px;
      }

      input.disabled {
        background-color: #ccc !important;
      }

      input[type='button'] {
        border: none;
        color: #fff;
        background-color: #e64145;
        border-radius: 4px;
        cursor: pointer;
      }

      .tips {
        position: fixed;
        top: 0;
        width: 100%;
        height: 40px;
        text-align: center;
      }

      .tips p {
        min-width: 300px;
        max-width: 400px;
        line-height: 40px;
        margin: 0 auto;
        color: #fff;
        display: none;
        background-color: #e64145;
        border-radius: 5px;
      }
    </style>
  </head>

  <body>
    <div class="register">
      <form id="ajaxForm">
        <ul>
          <li>
            <label>用户名</label>
            <input type="text" name="name" class="name" />
          </li>
          <li>
            <label>请设置密码</label>
            <input type="password" name="pass" class="pass" />