简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > ajax与json（实现php与js变量的交互）——管理员的登录
Blogger Information
Blog 40
fans 1
comment 0
visits 32704
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
ajax与json（实现php与js变量的交互）——管理员的登录
李明伟的博客
Original
1056 people have browsed it

后台管理系统的登录实现ajax异步刷新——

登录页面前端——

<!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>邮&nbsp;&nbsp;&nbsp;箱:
                <input type="email" id="email" name="email" value="<?= $user['email'] ?>" autofocus>
            </label>
        </p>

        <p>
            <label>密&nbsp;&nbsp;&nbsp;码:
                <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>

登录页面后端部分（用于从数据库中获取资源）——

<?php
$id = intval(trim($_GET['id']));
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php', 'root', 'root');
$sql = 'SELECT * FROM `user` where `id` = :id';
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':id', $id, PDO::PARAM_INT);
$stmt->execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC);
?>

登录页面js部分（ajax异步刷新）——

<script>
    function save(form) {
        var tips = form.lastElementChild;
        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                // tips.innerHTML = 'success';
                var data = JSON.parse(request.responseText);
                console.log(data);
                switch (data.status) {
                    case 1:
                        tips.classList.add('success');
                    case 0:
                        tips.classList.add('error');
                    case -1:
                        tips.classList.add('error');
                }
                tips.innerHTML = data.message;
                setTimeout(function () {
                    history.back();
                },2000);
            }
        }
        request.open('POST', 'ajax_manage.php?action=save');
        request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        request.send('email=' + form.email.value + '&password=' + form.password.value + '&id=' + form.id.value);
    }
</script>

注：setTimeout——延时触发器

        JSON.parse——解析json字符串，得到js变量

上述代码中将数据提交给ajax_manage.php

ajax数据接收处理页面——

<?php
// 屏蔽php的通知级别的错误
//error_reporting(E_ALL ^ E_NOTICE);
// 屏蔽php的警告级别的错误
error_reporting(E_ALL ^ E_WARNING);
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php', 'root', 'root');
$action = strtolower(trim($_GET['action']));
if ($action === '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(':id', $id, PDO::PARAM_INT);
    $stmt->bindParam(':email', $email, PDO::PARAM_STR, 60);
    $stmt->bindParam(':password', $password, PDO::PARAM_STR, 20);
    if ($stmt->execute()) {
        if ($stmt->rowCount() == 0) {
            $status = 0;
            $message = '信息未更新';
        } else {
            $status = 1;
            $message = '信息更新成功';
        }
    } else {
        //             项目如何上线商用, 直接提示出错即可, 不要输出具体出错信息
//            die(print_r($stmt->errorInfo()))
        $status = -1;
        $message = '信息更新失败';
    }
    echo json_encode(['status' => $status, 'message' => $message]);
}
?>

注：json_encode——将php变量变为json字符串

       strtolower（）——将字符串中的字符转换为小写字母

        trim（）——去除其中的空格

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！