Javascript 和 json 使用Ajax

最新推荐文章于 2022-10-14 15:12:32 发布

koastal

最新推荐文章于 2022-10-14 15:12:32 发布

阅读量363

点赞数

分类专栏： PHP JavaScript

本文链接：https://blog.csdn.net/koastal/article/details/50606358

版权

PHP 同时被 2 个专栏收录

91 篇文章 2 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

基本步骤

目前json的使用非常流行，所以ajax也经常和json结合在一块使用。
json主要用在ajax客户端和服务器的交互上，所以基本步骤与文章Javascript 使用Ajax类似。

客户端

对于客户端，区别实在对服务器返回的数据的判断上：

var data = JSON.parse(request.responseText);
if(data.success){
    document.getElementById("searchRes").innerHTML = data.msg;
}else{
    document.getElementById("searchRes").innerHTML = "查询失败："+data.msg;
}

服务器返回的json格式：
查询成功：

{"success":true,"msg":"员工编号：110，员工姓名：卡卡西，员工职位：保安队长"}

查询失败：

{"success":false,"msg":"没有查询到该员工信息"}

客户端首先对返回的json数据，使用JSON.parse方法将json数据转化为对象，然后通过判断对象的success属性，判断查询是否成功。

服务器端

服务器端程序跟Javascript 使用Ajax基本类似。主要区别实在返回数据上，原来返回的数据格式是纯文本，现在返回json格式数据。

header("Content-Type: application/json;charset=utf-8");

 $result = '{"success":false,"msg":"请求失败，没有找到编号为'.$id.'的员工"}';

$msg = "找到员工<br/>员工编号：".$id."，员工姓名：".$row['name']."，员工职位：".$row['job'];
        $result = '{"success":true,"msg":"'.$msg.'"}';

实例演示

XMLHttpRequestJson.html

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>XMLHttpRequestJson</title>
<style type="text/css">
*{
    font-size:25px;
    line-height:1.8;
}
</style>
</head>
<body>

<h1>查询员工</h1>
员工编号：<input type="text" id="keyword"/>
<input type="button" id="search" value="查询"/><br/> 
<p id="searchRes"></p>

<h1>添加员工</h1>
员工编号：<input type="text" id="id"/><br/>  
员工姓名：<input type="text" id="name"/><br/>
员工职位：<input type="text" id="job"/><br/>
<input type="button" id="add" value="添加"/><br/> 
<p id="addRes"></p> 

<script>
//查询员工
document.getElementById("search").onclick = function(){
    var request = new XMLHttpRequest();
    request.open("GET","serverJson.php?id="+document.getElementById("keyword").value);
    request.send();
    request.onreadystatechange = function(){
        if(request.readyState == 4){
            if(request.status == 200){
                var data = JSON.parse(request.responseText);
                if(data.success){
                    document.getElementById("searchRes").innerHTML = data.msg;
                }else{
                    document.getElementById("searchRes").innerHTML = "查询失败："+data.msg;
                }
            }else{
                document.getElementById("searchRes").innerHTML = "发生错误："+request.status;
            }
        }
    }
}
//添加员工
document.getElementById("add").onclick = function(){
    var request = new XMLHttpRequest();
    request.open("POST","serverJson.php");
    var data = "id="+document.getElementById("id").value+"&name="+document.getElementById("name").value+"&job="+document.getElementById("job").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send(data);
    request.onreadystatechange = function(){
        if(request.readyState == 4){
            if(request.status == 200){
                var data = JSON.parse(request.responseText);
                if(data.success){
                    document.getElementById("addRes").innerHTML = data.msg;
                }else{
                    document.getElementById("addRes").innerHTML = "添加失败："+data.msg;
                }
            }else{
                document.getElementById("addRes").innerHTML = "发生错误："+request.status;
            }
        }
    }
}
</script>
</body>
</html>

serverJson.php

<?php
header("Content-Type: application/json;charset=utf-8"); 

if($_SERVER["REQUEST_METHOD"] == "GET"){
    search();
}elseif($_SERVER["REQUEST_METHOD"] == "POST"){
    add();
}

function search(){
    //判断职工编号是否正确填写
    if(!isset($_GET["id"]) || empty($_GET["id"])){
        echo '{"success":false,"msg":"参数错误"}';
        return;
    }
    $id = $_GET["id"];
    $result = '{"success":false,"msg":"请求失败，没有找到编号为'.$id.'的员工"}';

    $mysqli = new mysqli('localhost', 'root', '', 'test');
    $mysqli->query("SET NAMES UTF8");
    $sql = "SELECT * FROM staff WHERE id=".$id;
    $res = $mysqli->query($sql);
    $row = $res->fetch_assoc();

    if(is_array($row) && $row['id']==$id){
        $msg = "找到员工<br/>员工编号：".$id."，员工姓名：".$row['name']."，员工职位：".$row['job'];
        $result = '{"success":true,"msg":"'.$msg.'"}';
    }
    echo $result;
    $mysqli->close();
}

function add(){
    //判断信息是否填写完整
    if(isset($_POST["id"])&&isset($_POST["name"])&&isset($_POST["job"])&&!empty($_POST["id"])&&!empty($_POST["name"])&&!empty($_POST["job"])){
        $id = $_POST["id"];
        $name = $_POST["name"];
        $job = $_POST["job"];
        $mysqli = new mysqli('localhost', 'root', '', 'test');
        $mysqli->query("SET NAMES UTF8");
        $sql = "INSERT INTO staff(id,name,job) VALUES ($id,'$name','$job')";
        $result = $mysqli->query($sql);
        if($result==true){
             echo '{"success":true,"msg":"添加员工操作成功"}';
        }
        $mysqli->close();
    }else{
        echo '{"success":false,"msg":"信息填写不完整"}';
    }
}

koastal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript 和 json 使用Ajax

基本步骤目前json的使用非常流行，所以ajax也经常和json结合在一块使用。 json主要用在ajax客户端和服务器的交互上，所以基本步骤与文章Javascript 使用Ajax类似。客户端对于客户端，区别实在对服务器返回的数据的判断上：var data = JSON.parse(request.responseText);if(data.success){ document.get
复制链接

扫一扫

专栏目录