......_js+php综合实验学生成绩查询">
devbox
小舞很执着
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

js+php+mysql实现的学生成绩管理系统_js+php综合实验学生成绩查询

作者：小舞很执着 | 2024-06-21 08:38:22

赞

踩

js+php综合实验学生成绩查询

js+php的简单学生管理系统,自己建个students的数据库

实现的效果如下图所示：

注册

登录

系统主页

新增页面

修改页面

注册页面--register.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  8.         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  9.         <style>
  10.             html,body{
  11.                 width: 100%;
  12.                 height: 100%;
  13.                 
  14.             }
  15.             body{
  16.                 background: url(./1.png) no-repeat 100% 100%;
  17.             }
  18.             body .container{
  19.                 width: 100%;
  20.                 height: 100%;
  21.                 display: flex;
  22.                 justify-content: center;
  23.                 align-items: center;
  24.             }
  25.             #register{
  26.                 width: 400px;
  27.                 
  28.             }
  29.             .panel-footer{
  30.                 display: flex;
  31.                 /* 垂直方向 */
  32.                 align-items: center;
  33.                 /* 水平方向 */
  34.                 justify-content: space-between;
  35.             }
  36.             .alert{
  37.                 margin: 0px;
  38.                 padding: 2px;
  39.                 text-align: center;
  40.                 display: none;
  41.             }
  42.         </style>
  43.         
  44.     </head>
  45.     <body>
  46.         <div class = 'container'>
  47.             <div class = 'panel panel-primary' id = 'register'>
  48.                 <div class = 'panel-heading'>
  49.                     注册
  50.                 </div>
  51.                 <div class = 'panel-body'>
  52.                     <div class = 'form-group'>
  53.                         <label for="username">用户名：</label>
  54.                         <input type="text" name = 'username' class = 'form-control' placeholder="用户名" />
  55.                     </div>
  56.                     <div class = 'form-group'>
  57.                         <label for="password">密码：</label>
  58.                         <input type="text" name = 'password' class = 'form-control' placeholder="密码" />
  59.                     </div>
  60.                     <div class = 'form-group'>
  61.                         <label for="repassword">确认密码：</label>
  62.                         <input type="text" name = 'repassword' class = 'form-control' placeholder="确认密码" />
  63.                     </div>
  64.                     <div class="alert alert-danger" role="alert">...</div>
  65.                 </div>
  66.                 <div class = 'panel-footer'>
  67.                     <a href="./login.html">马上登陆</a>
  68.                     <button class = 'btn btn-primary' id = 'registerBtn'>注册</button>
  69.                 </div>
  70.             </div>
  71.         </div>
  72.         <script type = 'module'>
  73.             import {$post, antiShake} from "./ajax.js";
  74.             var oBtn = document.querySelector("#registerBtn");
  75.             var aInputs = document.querySelectorAll(".panel-body input");
  76.             var aAlert = document.querySelector(".alert");
  77.  
  78.             //函数防抖
  79.             oBtn.onclick = antiShake(download, 1000);
  80.             
  81.             function download(){
  82.                 $post({
  83.                     url: "register.php",
  84.                     data: {
  85.                         username: aInputs[0].value,
  86.                         password: aInputs[1].value,
  87.                         repassword: aInputs[2].value,
  88.                         createTime: (new Date().getTime())
  89.                     },
  90.                     success: function(result){
  91.                         // console.log(result);
  92.                         var obj = JSON.parse(result);
  93.                         aAlert.style.display = 'block';
  94.                         if(obj.code){
  95.                             //错误
  96.                             aAlert.className = 'alert alert-danger';
  97.                             aAlert.innerHTML = obj.msg;
  98.  
  99.                         }else{
  100.                             aAlert.className = 'alert alert-success';
  101.                             //成功
  102.                             aAlert.innerHTML = obj.msg;
  103.                             setTimeout(() => {
  104.                                 location.assign("login.html");
  105.                             }, 500);
  106.                         }
  107.                     },
  108.                     error: function(msg){
  109.                         console.log(msg);
  110.                     }
  111.                 })
  112.             }
  113.             
  114.  
  115.         </script>
  116.     </body>
  117. </html>

注册的php代码-register.php

  1. <?php
  2.     header('content-type:text/html;charset="utf-8"');
  3.  
  4.     $responseData = array("code" => 0, "msg" => "");
  5.     /*
  6.         在后台再进行一次数据校验
  7.     */
  8.     $username = $_POST['username'];
  9.     $password = $_POST['password'];
  10.     $repassword = $_POST['repassword'];
  11.     $createTime = $_POST['createTime'];
  12.  
  13.     //1、判断用户名是否存在
  14.     if(!$username){
  15.         $responseData['code'] = 1;
  16.         $responseData['msg'] = "用户名不能为空";
  17.         echo json_encode($responseData);
  18.         exit;
  19.     }
  20.     if(!$password){
  21.         $responseData['code'] = 2;
  22.         $responseData['msg'] = "密码不能为空";
  23.         echo json_encode($responseData);
  24.         exit;
  25.     }
  26.  
  27.     if($password != $repassword){
  28.         $responseData['code'] = 3;
  29.         $responseData['msg'] = "两次输入不一致";
  30.         echo json_encode($responseData);
  31.         exit;
  32.     }
  33.  
  34.     $link = mysqli_connect("127.0.0.1", "root", "123456abc");
  35.     if(!$link){
  36.         $responseData['code'] = 4;
  37.         $responseData['msg'] = "服务器忙";
  38.         echo json_encode($responseData);
  39.         exit;
  40.     }
  41.     mysqli_set_charset($link, "utf8");
  42.  
  43.     mysqli_select_db($link, "qd2002");
  44.  
  45.  
  46.     $sql = "SELECT * FROM users WHERE username='{$username}'";
  47.     //mysql result
  48.     $res = mysqli_query($link, $sql);
  49.     //取出一行
  50.     $row = mysqli_fetch_assoc($res);
  51.  
  52.     //已经注册
  53.     if($row){
  54.         $responseData['code'] = 5;
  55.         $responseData['msg'] = "用户名已经存在";
  56.         echo json_encode($responseData);
  57.         exit;
  58.     }
  59.  
  60.     //加密
  61.     $str = md5(md5(md5($password).'qianfeng').'xiaoming');
  62.  
  63.     //准备sql，插入
  64.     $sql2 = "INSERT INTO users (username,password,createTime) VALUES('{$username}','{$str}',{$createTime})";
  65.  
  66.     $res = mysqli_query($link, $sql2);
  67.     if($res){
  68.         $responseData['msg'] = "注册成功";
  69.         echo json_encode($responseData);
  70.     }else{
  71.         $responseData['code'] = 6;
  72.         $responseData['msg'] = "注册失败";
  73.         echo json_encode($responseData);
  74.         exit;
  75.     }
  76.  
  77.     mysqli_close($link);
  78. ?>

登录页面-login.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  8.         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  9.         <style>
  10.             html,body{
  11.                 width: 100%;
  12.                 height: 100%;
  13.                 
  14.             }
  15.             body{
  16.                 background: url(./1.png) no-repeat 100% 100%;
  17.             }
  18.             body .container{
  19.                 width: 100%;
  20.                 height: 100%;
  21.                 display: flex;
  22.                 justify-content: center;
  23.                 align-items: center;
  24.             }
  25.             #login{
  26.                 width: 400px;
  27.                 
  28.             }
  29.             .panel-footer{
  30.                 display: flex;
  31.                 /* 垂直方向 */
  32.                 align-items: center;
  33.                 /* 水平方向 */
  34.                 justify-content: space-between;
  35.             }
  36.             .alert{
  37.                 margin: 0px;
  38.                 padding: 2px;
  39.                 text-align: center;
  40.                 display: none;
  41.             }
  42.         </style>
  43.         
  44.     </head>
  45.     <body>
  46.         <div class = 'container'>
  47.             <div class = 'panel panel-primary' id = 'login'>
  48.                 <div class = 'panel-heading'>
  49.                     登陆
  50.                 </div>
  51.                 <div class = 'panel-body'>
  52.                     <div class = 'form-group'>
  53.                         <label for="username">用户名：</label>
  54.                         <input type="text" name = 'username' class = 'form-control' placeholder="用户名" />
  55.                     </div>
  56.                     <div class = 'form-group'>
  57.                         <label for="password">密码：</label>
  58.                         <input type="text" name = 'password' class = 'form-control' placeholder="密码" />
  59.                     </div>
  60.  
  61.                     <div class="alert alert-danger" role="alert">...</div>
  62.                 </div>
  63.                 <div class = 'panel-footer'>
  64.                     <a href="./register.html">马上注册</a>
  65.                     <button class = 'btn btn-primary' id = 'loginBtn'>登陆</button>
  66.                 </div>
  67.             </div>
  68.         </div>
  69.         <script type = 'module'>
  70.             import {$post, antiShake} from "./ajax.js";
  71.             var oBtn = document.querySelector("#loginBtn");
  72.             var aInputs = document.querySelectorAll(".panel-body input");
  73.             var aAlert = document.querySelector(".alert");
  74.  
  75.             //函数防抖
  76.             oBtn.onclick = antiShake(download, 1000);
  77.             
  78.             function download(){
  79.                 $post({
  80.                     url: "login.php",
  81.                     data: {
  82.                         username: aInputs[0].value,
  83.                         password: aInputs[1].value,
  84.                     },
  85.                     success: function(result){
  86.                         // console.log(result);
  87.                         var obj = JSON.parse(result);
  88.                         aAlert.style.display = 'block';
  89.                         if(obj.code){
  90.                             //错误
  91.                             aAlert.className = 'alert alert-danger';
  92.                             aAlert.innerHTML = obj.msg;
  93.  
  94.                         }else{
  95.                             aAlert.className = 'alert alert-success';
  96.                             //成功
  97.                             aAlert.innerHTML = obj.msg;
  98.                         }
  99.                     },
  100.                     error: function(msg){
  101.                         console.log(msg);
  102.                     }
  103.                 })
  104.             }
  105.             
  106.  
  107.         </script>
  108.     </body>
  109. </html>

登录页面-login.php

  1. <?php
  2.     header('content-type:text/html;charset="utf-8"');
  3.  
  4.     $responseData = array("code" => 0, "msg" => "");
  5.     /*
  6.         在后台再进行一次数据校验
  7.     */
  8.     $username = $_POST['username'];
  9.     $password = $_POST['password'];
  10.      //1、判断用户名是否存在
  11.      if(!$username){
  12.         $responseData['code'] = 1;
  13.         $responseData['msg'] = "用户名不能为空";
  14.         echo json_encode($responseData);
  15.         exit;
  16.     }
  17.     if(!$password){
  18.         $responseData['code'] = 2;
  19.         $responseData['msg'] = "密码不能为空";
  20.         echo json_encode($responseData);
  21.         exit;
  22.     }
  23.     //天龙八部
  24.     //1、链接数据库
  25.     $link = mysqli_connect("127.0.0.1", "root", "123456abc");
  26.  
  27.     //2、判断数据库是否链接成功
  28.     if(!$link){
  29.         $responseData['code'] = 4;
  30.         $responseData['msg'] = "服务器忙";
  31.         echo json_encode($responseData);
  32.         exit;
  33.     }
  34.     //3、设置访问字符集
  35.     mysqli_set_charset($link, "utf8");
  36.  
  37.     //4、选择我们要访问的数据库
  38.     mysqli_select_db($link, "qd2002");
  39.  
  40.     //5、准备sql语句，进行登陆
  41.     //加密
  42.     $str = md5(md5(md5($password).'qianfeng').'xiaoming');
  43.     $sql = "SELECT * from users WHERE username='{$username}' AND password='{$str}'";
  44.  
  45.     //6、发送sql语句
  46.     $res = mysqli_query($link, $sql);
  47.  
  48.     //查询，取出其中的行
  49.     $row = mysqli_fetch_assoc($res);
  50.     // var_dump($row);
  51.  
  52.     if($row){
  53.         
  54.         $responseData['msg'] = "登陆成功";
  55.         echo json_encode($responseData);
  56.         
  57.     }else{
  58.         $responseData['code'] = 5;
  59.         $responseData['msg'] = "用户名或密码错误";
  60.         echo json_encode($responseData);
  61.         exit;
  62.     }
  63.  
  64.     mysqli_close($link);
  65. ?>

主页面 show.html

  1. <    <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
  7.         <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  8.         <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  9.         <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  10.         <title>Document</title>
  11.         <style>
  12.             .box{
  13.                 box-sizing: border-box;
  14.                 width: 100%;
  15.                 height: 100%;
  16.                 padding: 100px;
  17.                 position: absolute;
  18.                 top: 0%;
  19.                 left: 0%;
  20.                 background-color: rgba(200, 200, 200, .7);
  21.                 display: none;
  22.             }
  23.             .panel-footer{
  24.             display: flex;
  25.             justify-content: center;
  26.             align-items: center;
  27.         }
  28.         </style>
  29.  
  30.     </head>
  31.     <body>
  32.         <div class="container">
  33.             <div class="panel panel-primary">
  34.                  <div class="panel-heading">
  35.                      <h2>学生成绩管理系统</h2>
  36.                  </div>
  37.                  <div class="panel-body">
  38.                     <button type="button" class="btn btn-success select">获取学生成绩</button>
  39.                     <button type="button" class="btn btn-success add">添加学生成绩</button>
  40.                      <table class="table table-hover">
  41.                          <thead>
  42.                              <tr>
  43.                                  <th>学生学号</th>
  44.                                  <th>学生姓名</th>
  45.                                  <th>语文成绩</th>
  46.                                  <th>数学成绩</th>
  47.                                  <th>英语成绩</th>
  48.                                  <th colspan="2" style="text-align: center;">操作</th>
  49.                              </tr>
  50.                          </thead>
  51.                          <tbody id="tb"> </tbody>
  52.                      </table>
  53.                  </div>
  54.                  <div class='panel-footer'>
  55.                     <nav aria-label="...">
  56.                         <ul class="pager">
  57.                           <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
  58.                         </ul>
  59.                     </nav>
  60.                     <nav aria-label="Page navigation">
  61.                         <ul class="pagination">
  62.                           <li class = 'active'><a href="#">1</a></li>
  63.                           <li><a href="#">2</a></li>
  64.                           <li><a href="#">3</a></li>
  65.                           <li><a href="#">4</a></li>
  66.                           <li><a href="#">5</a></li>
  67.                         </ul>
  68.                     </nav>
  69.                     <nav aria-label="...">
  70.                         <ul class="pager">  
  71.                           <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
  72.                         </ul>
  73.                     </nav>
  74.                 </div>
  75.             </div>
  76.         </div>
  77.  
  78.         <div class='panel-body box'>
  79.             <div class='form-group'>
  80.                 <label for="username">学生姓名：</label>
  81.                 <input type="text" class='form-control' name='username' id="username" placeholder="学生姓名">
  82.             </div>
  83.             <div class='form-group'>
  84.                 <label for="chinese">语文成绩：</label>
  85.                 <input type="text" class='form-control' name='chinese' placeholder="语文成绩">
  86.             </div>
  87.             <div class='form-group'>
  88.                 <label for="math">数学成绩：</label>
  89.                 <input type="text" class='form-control' name='math' placeholder="数学成绩">
  90.             </div>
  91.             <div class='form-group'>
  92.                 <label for="english">英语成绩：</label>
  93.                 <input type="text" class='form-control' name='english' placeholder="英语成绩">
  94.             </div>
  95.             <button id = 'btn1' class = 'btn btn-primary cancel'>取消</button>
  96.             <button id = 'submit' class = 'btn btn-primary'>确定</button>
  97.         </div>
  98.     </body>
  99.     <script type="module">
  100.         import {post} from "./ajax.js";
  101.         var oBtain = document.querySelector(".select");
  102.         var oAdd = document.querySelector(".add")
  103.         var oTb = document.querySelector("#tb");
  104.         var oBox = document.querySelector(".box");
  105.         var oCancel =document.querySelector(".cancel");
  106.         var oSubmit = document.getElementById("submit");
  107.  
  108.         //展示信息
  109.         function show(){
  110.             post({
  111.             url:"show.php",
  112.             success:function(result){
  113.                 var arr = JSON.parse(result);
  114.                 var str = '';
  115.                 for(var i = 0;i<arr.length;i++){
  116.                     str +=`<tr>
  117.                         <td>${arr[i].id}</td>
  118.                         <td>${arr[i].username}</td>
  119.                         <td>${arr[i].chinese}</td>
  120.                         <td>${arr[i].math}</td>
  121.                         <td>${arr[i].english}</td>
  122.                         <td ><button type="button" class="btn btn-danger" id='${arr[i].id}'>删除</button></td>
  123.                         <td><button type="button" class="btn btn-warning" id='${arr[i].id}'>修改</button></td>
  124.                         </tr>`
  125.                 }
  126.                 oTb.innerHTML=str;
  127.             },
  128.             error:function(error){
  129.                 console.log(error)
  130.             }
  131.         })
  132.         }
  133.         oBtain.onclick = function(){
  134.            show()
  135.         }
  136.  
  137.         var aIput = document.querySelectorAll("input");
  138.         //插入信息
  139.         oAdd.onclick = function(){
  140.             oBox.style.display="block";
  141.             oSubmit.onclick = function(){
  142.                 post({
  143.                 url:"insert.php",
  144.                 data:{
  145.                     username:aIput[0].value,
  146.                     chinese:aIput[1].value,
  147.                     math:aIput[2].value,
  148.                     english:aIput[3].value,
  149.                 },
  150.                 success:function(result){
  151.                     if(result=="success"){
  152.                         alert("添加成功")
  153.                     }else{
  154.                         alert("添加失败，请重试")
  155.                     }
  156.                     
  157.                 },
  158.                 error:function(error){
  159.                     console.log(error)
  160.                 }
  161.                 })
  162.         }
  163.     }
  164.     oCancel.onclick = function(){
  165.                 oBox.style.display="none";
  166.     }
  167.  
  168.     //删除和修改学生信息
  169.     oTb.onclick = function(eve){
  170.         var e = eve||window.event;
  171.         var target = e.target ||e.srcElement;
  172.         if(target.nodeName.toLocaleLowerCase() == 'button'){
  173.             switch(target.className){
  174.                 //删除
  175.                 case 'btn btn-danger':                
  176.                     post({
  177.                         url:"delete.php",
  178.                         data:{
  179.                             id:target.id
  180.                         },
  181.                     success:function(result){
  182.                         if(result=="success"){
  183.                             oTb.removeChild(target.parentNode.parentNode);
  184.                             alert("删除成功")
  185.                         }else{
  186.                             alert("删除失败")
  187.                         }
  188.                         }
  189.                     });
  190.                     break;
  191.                     //修改
  192.                 case 'btn btn-warning':
  193.                 post({
  194.                     url:"update.php",
  195.                     data:{
  196.                             id:target.id
  197.                         },
  198.                     success:function(result){
  199.                         var arr = JSON.parse(result);
  200.                         oBox.style.display="block";
  201.                             aIput[0].value=arr[0].username,
  202.                             aIput[1].value=arr[0].chinese,
  203.                             aIput[2].value=arr[0].math,
  204.                             aIput[3].value=arr[0].english;
  205.                             var id = arr[0].id;
  206.                             oSubmit.onclick=function(){
  207.                                 post({
  208.                             url:"update1.php",
  209.                                 data:{
  210.                                     id:id,
  211.                                     username:aIput[0].value,
  212.                                     chinese:aIput[1].value,
  213.                                     math:aIput[2].value,
  214.                                     english:aIput[3].value,
  215.                                 },
  216.                                 success:function(result){
  217.                                     if(result=="success"){
  218.                                         alert("修改成功")
  219.                                     }else{
  220.                                         alert("请重新修改")
  221.                                     }
  222.                                 }
  223.                       })
  224.                             }
  225.  
  226.                         }
  227.                 })
  228.                
  229.             }       
  230.     }
  231.  }
  232.     </script>
  233.     </html>

show.php

  1. <?php
  2. header("content-type:text/html,charset='utf8'");
  3. $link=mysqli_connect("localhost","root","root");
  4. if(!$link){
  5.     echo "服务器忙，请重试";
  6.     exit;
  7. }
  8. mysqli_set_charset($link,"utf8");
  9. mysqli_select_db($link,"nz");
  10. $sql="select * from students";
  11. $res=mysqli_query($link,$sql);
  12. $arr = array();
  13. while($row=mysqli_fetch_assoc($res)){
  14.     array_push($arr,$row);
  15. };
  16. echo json_encode($arr);
  17.  
  18. mysqli_close($link);
  19.  
  20. ?>

通过ajax传数据-ajax.js

  1. export{
  2.     post,
  3.     get,
  4.     ajax,
  5.     antiShake
  6. }
  7.  
  8.  
  9. //函数防抖
  10. function antiShake(func, delay){
  11.     var timer = null;
  12.     return function(...argus){
  13.         clearTimeout(timer);
  14.         if(timer == null){
  15.             func.apply(this, argus);
  16.             timer = "调用一次";
  17.         }else{
  18.             timer = setTimeout(() => {
  19.                 func.apply(this, argus);
  20.             }, delay);
  21.         }
  22.     }
  23. }
  24.  
  25. function post(){
  26.     var argus =Object.assign({"method" :"post"},...arguments)
  27.     var g = new Ajax(argus);
  28.     g.init();
  29.     g.type()
  30. }
  31.  
  32. function get(){
  33.     var argus =Object.assign({"method" :"get"},...arguments)
  34.     var g = new Ajax(argus);
  35.     g.init();
  36.     g.type()
  37. }
  38.  
  39. // function ajax(){
  40. //     var a =new Ajax(...arguments);
  41. //     a.init();
  42. //     a.type();
  43. // }
  44.  
  45. function ajax(){
  46.     var a = new Ajax(...arguments);
  47.     a.init();
  48.     a.type()
  49. }
  50. class Ajax{
  51.     constructor({method,url,data,success,error}){
  52.         this.method = method;
  53.         this.url = url;
  54.         this.data = data;
  55.         this.success = success;
  56.         this.error = error;
  57.     }
  58.     init(){
  59.         var xhr = null;
  60.         try{
  61.             xhr = new  XMLHttpRequest;
  62.         }catch{
  63.             xhr = new ActiveXObject("XMLHTTP");
  64.         }
  65.         return xhr;
  66.     }
  67.  
  68.     type(){
  69.         var xhr= this.init()
  70.         var querystring=""
  71.         if(this.data){
  72.             querystring = this.queryString(this.data);
  73.         }
  74.         if(this.method=="get"){
  75.             xhr.open(this.method,this.url+"?"+querystring,true);
  76.             xhr.send();
  77.         }else{
  78.             xhr.open(this.method,this.url,true);
  79.             xhr.setRequestHeader('content-type', "application/x-www-form-urlencoded");
  80.             xhr.send(querystring);
  81.         }
  82.  
  83.         xhr.onreadystatechange = ()=>{
  84.             if(xhr.readyState ==4){
  85.                 if(xhr.status==200){
  86.                     if(this.success){
  87.                         this.success(xhr.responseText)
  88.                     }
  89.                 }else{
  90.                     if(this.error){
  91.                         this.error("error"+xhr.status)
  92.                     }
  93.                 }
  94.             }
  95.            
  96.         }
  97.     }
  98.  
  99.     queryString(dataObj){
  100.         var str='';
  101.         for(var attr in dataObj){
  102.             str+=`${attr}=${dataObj[attr]}&`
  103.         }
  104.         return str.substring(0,str.length-1)
  105.     }
  106. }

分页-paging.php

  1. <?php
  2. header("content-type:text/html,charset='utf8'");
  3. $page = $_POST['page'] ? $_POST['page'] :1;
  4. $limit = $_POST['limit'] ? $_POST['limit']:10;
  5. $count = 0; //总条数
  6. $pages = 0; //总页数
  7. $skip = 0; //跳过的条数
  8.  
  9. $link=mysqli_connect("localhost","root","root");
  10. if(!$link){
  11.     echo "服务器忙，请重试";
  12.     exit;
  13. }
  14. mysqli_set_charset($link,"utf8");
  15. mysqli_select_db($link,"nz");
  16. $sql = "SELECT COUNT(*) FROM students";
  17. $res=mysqli_query($link,$sql);
  18. $row = mysqli_fetch_assoc($res);
  19. $count = $row['COUNT(*)'];
  20. // echo $count;
  21. $pages = ceil($count / $limit);
  22. $page = max(1, $page);
  23. $page = min($page, $pages);
  24. $skip = ($page -1) * $limit;
  25. $msg =array(
  26.     "page" => $page, 
  27.     "count" => $count, 
  28.     "pages" => $pages, 
  29.     "limit" => $limit, 
  30.     "skip" => $skip,
  31.     "userlist" => array()
  32. );
  33. $sql2 = "SELECT * FROM students LIMIT {$skip}, {$limit}";
  34. $res2 = mysqli_query($link, $sql2);
  35. while($row2 = mysqli_fetch_assoc($res2)){
  36.     array_push($msg['userlist'], $row2);
  37. }
  38. echo json_encode($msg);
  39. mysqli_close($link);
  40.  
  41. ?>

数据添加 insert.php

  1. <?php
  2.  
  3. header("content-type:text/html,charset='utf8'");
  4. $username = $_POST['username'];
  5. $chinese = $_POST['chinese'];
  6. $math = $_POST['math'];
  7. $english = $_POST['english'];
  8. $link = mysqli_connect("localhost","root","root");
  9. if(!$link){
  10.     echo "服务器忙，请稍后重试";
  11.     exit;
  12. };
  13. mysqli_set_charset($link,"utf8");
  14. mysqli_select_db($link,"nz");
  15. $sql ="insert into students (username,chinese,math,english) values('{$username}','{$chinese}','{$math}','{$english}')";
  16. $res = mysqli_query($link,$sql);
  17. if($res){
  18.     echo "success";
  19. }else{
  20.     echo "error";
  21. };
  22.  
  23. mysqli_close($link);
  24. ?>

数据删除 delete.php

  1. <?php
  2. header('content-type:text/html,charset="utf8"');
  3. $id=$_POST['id'];
  4. $link=mysqli_connect("localhost","root","root");
  5. if(!$link){
  6.     echo "服务器忙，请重试";
  7.     exit;
  8. };
  9. mysqli_set_charset($link,"utf8");
  10. mysqli_select_db($link,"nz");
  11. $sql="delete from students where id={$id}";
  12. $res =  mysqli_query($link,$sql);
  13. if($res){
  14.     echo "success";
  15. }else{
  16.     echo "error";
  17. };
  18. mysqli_close($link);
  19. ?>

数据修改-查找update.php

  1. <?php
  2. header("content-type:text/html,charset='utf8'");
  3. $id=$_POST['id'];
  4.  
  5. $link=mysqli_connect("localhost","root","root");
  6. if(!$link){
  7.     echo "服务器忙，请重试";
  8.     exit;
  9. }
  10. mysqli_set_charset($link,"utf8");
  11. mysqli_select_db($link,"nz");
  12. $sql="select  * from students where id ='{$id}'";
  13. $res=mysqli_query($link,$sql);
  14. $arr = array();
  15. while($row=mysqli_fetch_assoc($res)){
  16.     array_push($arr,$row);
  17. };
  18. echo json_encode($arr);
  19. mysqli_close($link);
  20.  
  21. ?>

数据修改-更新 update1.php

  1. <?php
  2. header("content-type:text/html,charset='utf8'");
  3. $id = $_POST['id'];
  4. $username = $_POST['username'];
  5. $chinese = $_POST['chinese'];
  6. $math = $_POST['math'];
  7. $english = $_POST['english'];
  8.  
  9. $link=mysqli_connect("localhost","root","root");
  10. if(!$link){
  11.     echo "服务器忙，请重试";
  12.     exit;
  13. }
  14. mysqli_set_charset($link,"utf8");
  15. mysqli_select_db($link,"nz");
  16. // $sql="delete from students where id={$id}";
  17. $sql = "UPDATE students SET username ={$username} ,chinese ={$chinese},math={$math},english={$english} where id={$id}";
  18. $res=mysqli_query($link,$sql);
  19. if($res){
  20.     echo "success";
  21. }else{
  22.     echo "error";
  23. };
  24. mysqli_close($link);
  25.  
  26. ?>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/742616
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号