独立完成员工管理系统中的用户更新操作，体会Ajax在前后端交互的作用 - 2月25日作业

Home > List of blog posts > 独立完成员工管理系统中的用户更新操作，体会Ajax在前后端交互的作用

Blogger Information

Blog 49

fans 0

comment 4

visits 41884

Special Recommendation

More>

Related recommendations

实例

<?php
$id = intval(trim($_GET['id']));
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
$stmt = $pdo->prepare("SELECT * FROM `user` WHERE `id`={$id}");
$stmt->execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC);
$pdo = null;
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户编辑</title>
    <style>
        h3 {
            text-align: center;
        }

        div {
            width: 300px;
            height: 180px;
            /*background-color: lightblue;*/
            margin: 0 auto;
            text-align: center;
            padding: 20px;
            border: 1px dashed #888;
            border-radius: 5%;
        }

        div input {
            border: none;
            border-bottom: 1px solid #333;
        }

        button:hover {
            cursor: pointer;
            background-color: lightblue;
        }

        .success {
            color: green;
        }
        .error {
            color: red;
        }

    </style>
</head>
<body>
<h3>用户编辑</h3>
<div>
    <form name="user">
        <p>
            <label>用户名:
                <input type="text" name="name" value="<?=$user['name']?>" disabled>
            </label>
        </p>

        <p>
            <label>邮   箱:
                <input type="email"  id="email" name="email" value="<?=$user['email']?>" autofocus>
            </label>
        </p>

        <p>
            <label>密   码:
                <input type="password" id="password" name="password" value="<?=$user['password']?>">
            </label>
        </p>
        <!--            将当前用户的id,做为更新条件,以隐藏域的方式发送到服务器端-->
        <input type="hidden" id="id" value="<?=$user['id']?>">
        <p>
            <button type="button" onclick="save(this.form)">保存</button>
            <button type="button" onclick="history.back()">取消</button>
        </p>

        <!-- 提示信息占位符-->
        <p></p>
    </form>
</div>
    <script>
        function save(form){
            var request = new XMLHttpRequest();
            //监听成功回调
            request.onreadystatechange = function(ev){
                 if(request.readyState === 4 && request.status === 200){
                       var data = JSON.parse(request.responseText);
                      var tips = form.lastElementChild;
                     tips.innerHTML = data.message;

                     if(data.status === 1){
                         tips.classList.add('success');
                     }else{
                         tips.classList.add('error');
                     }
                     setTimeout(function(){
                         history.back();
                     },2000);
                 }
            };
            //初始化参数
            request.open('POST','user_manage.php?action=save');
            //设置请求头
            request.setRequestHeader('content-type','application/x-www-form-urlencoded');
            //发送请求到后端,以键值对发
            var data = 'email='+form.email.value+'&password='+form.password.value+'&id='+form.id.value;
            request.send(data);

        }
    </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

staff_list.php

实例

<?php
  $pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
 $sql = 'SELECT * FROM `staff` LIMIT 0,5';
 $stmt = $pdo->prepare($sql);
$stmt->execute();
$staffs = $stmt->fetchAll(PDO::FETCH_ASSOC);
$pdo = null;
$tableTitle = '员工信息表';
$total = count($staffs);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?php echo $title; ?></title>
    <style>
        table,th,td {
            border: 1px solid #666;
            padding: 8px;
        }
        table {
            border-collapse: collapse;
            width: 80%;
            text-align: center;
            margin: 30px auto;
        }
        thead tr:first-of-type {
            background-color: lightblue;
        }

        tbody tr:hover {
            background-color: #efefef;
        }

        table > caption {
            font-size: 1.2rem;
            margin-bottom: 15px;
        }
        table + p {
            text-align: center;
        }

        button:hover {
            cursor: pointer;
            background-color: lightblue;
        }

        /*添加按钮给个特殊样式*/
        #add {
            height: 25px;
            width: 90px;
            position: absolute;
            left: 650px;
            top: 40px;
        }

    </style>
</head>
<body>
<button onclick="location.href='#'" id="add">添加</button>


<table>
    <caption>
        <?php
        echo '<span style="color:red">' . $tableTitle . '</span>';
        ?>
    </caption>
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>职务</th>
        <th>手机</th>
        <td>入职</td>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    <!--foreach()替代语法-->
    <?php foreach($staffs as $staff) : ?>
        <tr>

            <td><?php echo $staff['id']; ?></td>
            <td><?php echo $staff['name']; ?></td>


            <td><?php echo $staff['age']; ?></td>

            <!--if()替代语法-->
            <td>
                <?php if($staff['sex'] == 1) : ?>
                    男
                <?php else: ?>
                    女
                <?php endif; ?>
            </td>


            <!--如果只是简单的输出变量可以使用php短标签语法-->
            <td><?=$staff['position']?></td>
            <td><?=$staff['mobile']?></td>

            <td>
                <?php
                echo date('Y/m/d',$staff['hiredate']);
                ?>
            </td>

            <td>
                <button onclick="location.href='#'">编辑</button>
                <button onclick="location.href='#'"><span style="color:red">删除</span></button>
            </td>

        </tr>
    <?php endforeach;?>

    </tbody>
</table>
<p>总计:
    <?php echo $total;  ?>
    人</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

user_list.php

实例

<?php
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
$stmt = $pdo->prepare('SELECT * FROM `user` LIMIT 1');
$stmt -> execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC);
$pdo = null;
?>
<html lang="en">
<head>
    <meta charchet="UTF-8">
    <title>用户设置</title>
    <style>
        table,th,td {
            border: 1px solid #666;
            padding: 8px;
        }
        table {
            border-collapse: collapse;
            width: 80%;
            text-align: center;
            margin: 30px auto;
        }
        thead tr:first-of-type {
            background-color: lightblue;
        }


        table > caption {
            font-size: 1.2rem;
            margin-bottom: 15px;
        }

        button:hover {
            cursor: pointer;
            background-color: lightblue;
        }
    </style>
</head>
<body>
  <table>
      <option>用户管理</option>
      <thead>
      <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>邮箱</th>
          <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr>
          <td><?=$user['id']?></td>
          <td><?=$user['name']?></td>
          <td><?=$user['email']?></td>
          <td>
              <button onclick="location.href='user_edit.php?id=<?=$user['id']?>'">编辑</button>
          </td>
      </tr>
      </tbody>
  </table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

user_edit.php

实例

<?php
$id = intval(trim($_GET['id']));
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
$stmt = $pdo->prepare("SELECT * FROM `user` WHERE `id`={$id}");
$stmt->execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC);
$pdo = null;
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户编辑</title>
    <style>
        h3 {
            text-align: center;
        }

        div {
            width: 300px;
            height: 180px;
            /*background-color: lightblue;*/
            margin: 0 auto;
            text-align: center;
            padding: 20px;
            border: 1px dashed #888;
            border-radius: 5%;
        }

        div input {
            border: none;
            border-bottom: 1px solid #333;
        }

        button:hover {
            cursor: pointer;
            background-color: lightblue;
        }

        .success {
            color: green;
        }
        .error {
            color: red;
        }

    </style>
</head>
<body>
<h3>用户编辑</h3>
<div>
    <form name="user">
        <p>
            <label>用户名:
                <input type="text" name="name" value="<?=$user['name']?>" disabled>
            </label>
        </p>

        <p>
            <label>邮   箱:
                <input type="email"  id="email" name="email" value="<?=$user['email']?>" autofocus>
            </label>
        </p>

        <p>
            <label>密   码:
                <input type="password" id="password" name="password" value="<?=$user['password']?>">
            </label>
        </p>
        <!--            将当前用户的id,做为更新条件,以隐藏域的方式发送到服务器端-->
        <input type="hidden" id="id" value="<?=$user['id']?>">
        <p>
            <button type="button" onclick="save(this.form)">保存</button>
            <button type="button" onclick="history.back()">取消</button>
        </p>

        <!-- 提示信息占位符-->
        <p></p>
    </form>
</div>
    <script>
        function save(form){
            var request = new XMLHttpRequest();
            //监听成功回调
            request.onreadystatechange = function(ev){
                 if(request.readyState === 4 && request.status === 200){
                       var data = JSON.parse(request.responseText);
                      var tips = form.lastElementChild;
                     tips.innerHTML = data.message;

                     if(data.status === 1){
                         tips.classList.add('success');
                     }else{
                         tips.classList.add('error');
                     }
                     setTimeout(function(){
                         history.back();
                     },2000);
                 }
            };
            //初始化参数
            request.open('POST','user_manage.php?action=save');
            //设置请求头
            request.setRequestHeader('content-type','application/x-www-form-urlencoded');
            //发送请求到后端,以键值对发
            var data = 'email='+form.email.value+'&password='+form.password.value+'&id='+form.id.value;
            request.send(data);

        }
    </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

user_manage.php

实例

<?php
/**
 * Created by PhpStorm.
 * User: lenovo
 * Date: 2019/2/26
 * Time: 15:51
 */
   $pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
   $action = strtolower(trim($_GET['action']));
   switch($action){
       case 'save':
           $sql = 'UPDATE `user` SET `email`=:email,`password`=:password WHERE `id`=:id';
           $stmt = $pdo->prepare($sql);

           $email =strtolower(trim($_POST['email']));
           $password =sha1(strtolower(trim($_POST['password'])));
           $id =strtolower(trim($_POST['id']));

           $stmt->bindParam('email',$email,PDO::PARAM_STR,60);
           $stmt->bindParam('password',$password,PDO::PARAM_STR,20);
           $stmt->bindParam('id',$id,PDO::PARAM_INT);

          if(true === $stmt-execute()){
             if($stmt->rowCount() === 1){
                 $status =1;
                 $message = "更新成功";
             } else if($stmt->rowCount ==0){
                 $status = 0;
                 $message = "没有更新";
             }
          }else{
              $status = -1;
              $message = "出错了！";
          }
          }
           echo json_encode(['status'=>$status,'message'=>$message]);
           exit;
   }
?>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

css中实现缓慢上升动作的代码

2019-02-08 20:58:04