Community Learn Tools Library Leisure
search
English
Home > List of blog posts > ajax请求与json数据--20190125
Blogger Information
Blog 25
fans 1
comment 0
visits 25218
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数据--20190125
曲小冷
Original
1084 people have browsed it

使用知识：

JSON

以前端JS进行ajax的POST请求为例，后端PHP处理请求为例：
1.前端构造一个JS对象，用于包装要传递的数据，然后将JS对象转化为JSON字符串，再发送请求到后端；
2.后端PHP接收到这个JSON字符串，将JSON字符串转化为PHP对象，然后处理请求。
相同的数据在这里有3种不同的表现形式，分别是前端的JS对象、传输的JSON字符串、后端的PHP对象
JS中与JSON相关的几个函数

1. 将JS数据结构转化为JSON字符串 —— JSON.stringify(value[, replacer [, space]])
JSON.stringify({"name":"Good Man","age":18})返回一个字符串 "{"name":"GoodMan","age":18}"
2. 将JSON字符串解析为JS数据结构 —— JSON.parse(text[, reviver])
3. 影响 JSON.stringify 的神奇函数 —— object.toJSON
如果你在一个JS对象上实现了toJSON方法，那么调用JSON.stringify去序列化这个JS对象时，JSON.stringify会把这个对象的toJSON方法返回的值作为参数去进行序列化。

AJAX请求：

同步与异步的根本区别在于；请求发出后，是否需要等待结果，必须等待结果就是同步，不用等待继续执行就是异步

Ajax技术核心是XMLHttpRequest对象

//GET请求
var request = new XMLHttpRequest(); //创建XHR对象可以直接实例化XMLHttpRequest
request.open('get', 'demo.php', false); //连接服务器
request.send(); //发送请求
request.onreadystatechange = function(){    //接受返回
    if(request.readyState==4 && request.status==200){
        //读取成功操作
    }
}

//POST请求
// 1、创建ajax对象
var request = new XMLHttpRequest();    // 2、监听成功回调
request.onreadystatechange = function(ev){        // 成功返回的信息
    if(request.readyState==4 && request.status==200){
       frame.href="user_manager.php";
    }
}    
// 3、初始化参数
request.open('POST','user_manager.php?active=save');    // post 请求 需要设置一个请求头
request.setRequestHeader('content-type','application/x-www-form-urlencoded');    // post 请求发送请求到服务器
// 以键值对：
var data = 'email='+form.email.value+'&password='+form.password.value+'&id='+form.id.value;
request.send(data);

open()方法，它接受三个参数：要发送的请求类型(get、post)、请求的URL和表示是否异步

open()方法并不会真正发送请求，而只是启动一个请求以备发送。通过send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填null。执行send()方法之后，请求就会发送到服务器上。


当请求发送到服务器端，收到响应后，响应的数据会自动填充XHR对象的属性。那么一共有四个属性：

XHR对象的四个属性.png

接受响应之后，第一步检查status属性，以确定响应已经成功返回。一般而已HTTP状态代码为200作为成功的标志

HTTP状态吗.png

使用异步调用的时候，需要触发readystatechange事件，然后检测readyState属性即可。这个属性有五个值：


readyState属性.png


代码：

按钮请求编辑：
<button onclick="location.href='user_edit.php?id=<?=$user['id'] ?>'" class="layui-btn layui-btn-normal layui-btn-xs"><i class='layui-icon layui-icon-edit'></i></button>
编辑页面：
<?php

    $id = intval(trim($_GET['id']));
    $pdo = new PDO("mysql:host=127.0.0.1;dbname=staff;",'root','root');
    $stmt = $pdo->prepare("select * from staff where id ={$id}");
    $stmt->execute();
    $user = $stmt->fetch(PDO::FETCH_ASSOC);
    $pdo = null;

?>

<link rel="stylesheet" href="static/layui/css/layui.css" media="all">
<script src="static/js/jquery.js"></script>
<script src="static/layui/layui.all.js"></script>
<style>
    .login{width:350px;margin:50px auto;}
    .login h3{text-align:center;line-height:50px;font-size:24px;font-weight:bold;}
    .success{color:#5FB878;}
    .error{color:#FF5722;}
    .notice{color:#FFB800;}
</style>

<div class='login'>
    <h3>员工信息编辑</h3>
    <form action="" class="layui-form" id='edit-form' name='user'>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" value="<?=$user['name']; ?>" readonly  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮 箱</label>
            <div class="layui-input-inline">
                <input type="email" name="email" value="<?=$user['email']; ?>" required  lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电 话</label>
            <div class="layui-input-inline">
                <input type="text" name="mobile" value="<?=$user['mobile']; ?>" required  lay-verify="required|number" placeholder="请输入电话" autocomplete="off" class="layui-input">
            </div>
        </div>
        <input type="hidden" name='id' value="<?=$id ?>" />

        <div class="layui-form-item">
            <label class="layui-form-label"> </label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" lay-submit lay-filter="formDemo">更新</button>
                <button class="layui-btn layui-btn-primary" onclick='history.back();'>取消</button>
            </div>
        </div>
        <h4 id='tips' class='success'></h4>
    </form>
</div>

<script>
    layui.use(['layer','form'], function(){
        var form = layui.form;
        form.render();
        
        //监听提交
        form.on('submit(formDemo)', function(data){
            var form = data.form;
            console.log(form);

            // 以 ajax 异步方式与服务器进行数据交互

            // 1、创建ajax对象
            var request = new XMLHttpRequest();

            // 2、监听成功回调
            request.onreadystatechange = function(){
                // 成功返回的信息
                if(request.readyState===4 && request.status===200){
                    // console.log(request.responseText);
                    // request.responseText === $_POST 响应返回的信息 是user_manager.php 文件内容
                    var data = JSON.parse(request.responseText);   // JSON.parse 将服务器传输的信息转为json对象

                    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);
                }
            }

            // 3、初始化参数
            request.open('POST','check.php?action=update');

            // post 请求 需要设置一个请求头
            request.setRequestHeader('content-type','application/x-www-form-urlencoded');

            // 发送请求到服务器
            // 以键值对：
            var data = 'email='+form.email.value+'&mobile='+form.mobile.value+'&id='+form.id.value;

            request.send(data);
        });
    });

</script>

请求检查：
<?php
// 用户管理操作 不是界面
$pdo = new PDO('mysql:host=127.0.0.1;dbname=staff;','root','root');
$action = strtolower(trim($_REQUEST['action']));

session_start();

// 返回json格式数据 ['status'=>1,'msg'=>'lll']

$status = 0;
$message = '';

switch ($action){
    case 'update':
        $stmt = $pdo->prepare("UPDATE `staff` SET `email` = :email,`mobile` = :mobile WHERE id = :id");

        $email = strtolower(trim($_POST['email']));
        $mobile = intval(trim($_POST['mobile']));
        $id = $id = intval(trim($_POST['id']));

        $stmt->bindParam('email',$email,PDO::PARAM_STR,60);
        $stmt->bindParam('mobile',$mobile,PDO::PARAM_INT);
        $stmt->bindParam('id',$id,PDO::PARAM_INT);
        if($stmt->execute()){
            // 更新成功
            if($stmt->rowCount() === 1){
                $status = 1;
                $message = '更新成功';
            }else if($stmt->rowCount() === 0){
                $status = 0;
                $message = '没有更新';
            }
        }else{
            // 上线后 下面这句话 应删除
            // die(print_r($stmt->errorInfo()));    //开发时使用
            $status = -1;
            $message = '保存失败，请检查';
        }
        exit(json_encode(['status'=>$status,'message'=>$message]));  // 将信息返回给前台
    break;

    case 'add':
        $sql = "INSERT INTO staff(`name`,`age`,`sex`,`salary`,`position`,`email`,`hiredate`) VALUES(:name,:age,:sex,:salary,:position,:email,:hiredate)";
        $stmt = $pdo->prepare($sql);

        $name = trim($_POST['name']);
        $age = trim($_POST['age']);
        $sex = trim($_POST['sex']);
        $salary = trim($_POST['salary']);
        $position = trim($_POST['position']);
        $email = trim($_POST['email']);
        $hiredate = time();

        $stmt->bindValue('name',$name,PDO::PARAM_STR);
        $stmt->bindValue('age',$age,PDO::PARAM_INT);
        $stmt->bindValue('sex',$sex,PDO::PARAM_INT);
        $stmt->bindValue('salary',$salary,PDO::PARAM_INT);
        $stmt->bindValue('position',$position,PDO::PARAM_STR);
        $stmt->bindValue('email',$email,PDO::PARAM_STR);
        $stmt->bindValue('hiredate',$hiredate,PDO::PARAM_INT);

        if ($stmt->execute()){
            if ($stmt->rowCount() === 1){
                $status = 1;
                $message = '新增成功';
            }else if($stmt->rowCount() === 0){
                $status = 0;
                $message = '没有记录新增';
            }
        }else{
            $status = -1;
            $message = '新增失败，请检查';
        }

        exit(json_encode(['status'=>$status,'message'=>$message]));  // 将信息返回给前台
    break;

    case 'del':
        $id = trim($_POST['id']);
        $sql = "UPDATE `staff` SET `delete_time` = :delete_time WHERE id = :id";
        $stmt = $pdo->prepare($sql);
        if ($stmt->execute(['delete_time'=>time(),'id'=>$id])){
            if ($stmt->rowCount() == 1){
                $status = 1;
                $message = '删除成功';
            }elseif ($stmt->rowCount() == 0){
                $status = 0;
                $message = '没有记录删除';
            }
        }else{
            $message = '删除失败，请检查';
        }
        exit(json_encode(['status'=>$status,'message'=>$message]));  // 将信息返回给前台
    break;
}

效果图：

列表页.png

员工信息编辑界面.png

Correction status：qualified

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