此案例在XAMPP本地服务器上运行，需要应用jquery3.1.1的版本，应用JSON传递数据

代码如下：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax.php,交互</title>
    <style type="text/css">
    *{
        font-size: 24px;
    }
    </style>
    <script type="text/javascript" src="../jquery/jquery-3.1.1.js"></script>
</head>
<body>
    <h1>员工查询</h1>
    <label>请输入员工编号：</label>
    <input type="text" id="keyword"></input><br><br>
    <button id="search">查询</button>
    <p id="searchResult"></p>
    <h1>创建员工</h1>
    <label>请输入员工姓名：</label>
    <input type="text" id="staffname"></input><br><br>
    <label>请输入员工编号：</label>
    <input type="text" id="staffnumber"></input><br><br>
    <label>请选择员工性别：</label>
    <select id="staffsex">
        <option>男</option>
        <option>女</option>
        <option>人妖</option>
        <option>未知</option>
    </select><br><br>
    <label>请输入员工职位：</label>
    <input type="text" id="staffjob"></input><br><br>
    <button id="save">创建</button>
    <p id="createResult"></p>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#search").click(function(){
            $.ajax({
                url:'../php/phpD.php?number='+$("#keyword").val(),
                type:'GET',
                dataType:'json',
            })
            .done(function(data) {
                if(data.success){
                    $("#searchResult").html(data.msg);
                }
                else{
                    $("#searchResult").html("发生错误："+data.msg);
                }
            })
            .fail(function(jqXHR) {
                alert("发生错误："+jqXHR.status);
            });
            
        });

        $("#save").click(function(){
            $.ajax({
                url: '../php/phpD.php',
                type:'POST',
                dataType: 'json',
                data:{
                    name:$("#staffname").val(),
                    number:$("#staffnumber").val(),
                    sex:$("#staffsex").val(),
                    job:$("#staffjob").val(),
                },
            })
            .done(function(data) {
                if(data.success){
                            $("#createResult").html(data.msg);
                        }
                        else{
                            $("#createResult").html("发生错误："+data.msg);
                        }
            })
            .fail(function(jqXHR) {
                alert("发生错误："+jqXHR.status);
            });
            
        });
    });
</script>
</body>
</html>

后台php代码：

<?php

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

$staff=array(
    array("name"=>"洪七","number"=>"101","sex"=>"男","job"=>"总经理"),
    array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>"开发工程师"),
    array("name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>"产品经理"));

if($_SERVER["REQUEST_METHOD"]=="GET"){
    search();
}
elseif ($_SERVER["REQUEST_METHOD"]=="POST"){
    create();
}
//通过员工编号搜索员工
function search(){
    //检查是否有员工编号的参数
    //isset检测变量是否设置；empty判断值是否为空
    //超全局变量$_GET和$_POST用于收集表单数据
    if(!isset($_GET["number"])||empty($_GET["number"])){
        echo'{"success":false,"msg":"参数错误"}';
        return;
    }
    //函数之外声明的变量拥有Global作用域，只能在函数以外进行访问
    //global关键词用于访问函数内的全局变量
    global $staff;
    //获取number参数
    $number=$_GET["number"];
    $result='{"success":false,"msg":"没有找到员工"}';
    //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在则修改，返回结果
    foreach($staff as $value){
        if($value["number"]==$number){
            $result='{"success":true,"msg":"找到员工:员工编号:'.$value["number"].',员工姓名:'.$value["name"].',员工性别:'.$value["sex"].',员工职位:'.$value["job"].'"}';
            break;
        }
    }
    echo $result;
}
//创建员工
function create(){
    //判断信息是否填写完全
    if(!isset($_POST["name"])||empty($_POST["name"])||!isset($_POST["number"])||empty($_POST["number"])||!isset($_POST["sex"])||empty($_POST["sex"])||!isset($_POST["job"])||empty($_POST["job"])){
        echo'{"success":false,"msg":"参数错误，员工信息填写不全"}';
        return;
    }
    //TODO:获取POST表单数据并保存到数据库
    
    //提示保存成功
    echo'{"success":true,"msg":"员工:'.$_POST["name"].'信息保存成功!"}';
}

?>

AJAX应用小案例的更多相关文章

  1. JSONP跨域访问百度实现搜索提示小案例

    一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...

  2. javascript常用小案例

    常用javascript小案例 样式调节 //注: 这个可以控制td中的字段成行显示 #modelInfos td,th { white-space: nowrap; } //文本输入框随着内容尺寸往 ...

  3. ES6基础与解构赋值（高颜值弹框小案例！）

    let只作用在当前块级作用域内使用let或者const声明的变量,不能再被重新声明let不存在`变量提升` console.log(dad); var dad = '我是爸爸!';//预定义undef ...

  4. 机械表小案例之transform的应用

    这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取 ...

  5. shell讲解-小案例

    shell讲解-小案例 一.文件拷贝输出检查 下面测试文件拷贝是否正常,如果cp命令并没有拷贝文件myfile到myfile.bak,则打印错误信息.注意错误信息中basename $0打印脚本名.如 ...

  6. [jQuery学习系列六]6-jQuery实际操作小案例

    前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...

  7. 02SpringMvc_springmvc快速入门小案例（XML版本）

    这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:

  8. React.js入门小案例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  9. SqlDependency缓存数据库表小案例

    SqlDependency的简介: SqlDependency是outputcache网页缓存的一个参数,它的作用是指定缓存失效的数据库依赖项,可以具体到数据库和表. SqlDependency能解决 ...

随机推荐

  1. Android应用项目中BaseAdapter、SimpleAdapter和ArrayAdapter中的三种适配器

    一.写在前面: 本次我们来讲解一下Android应用中三个适配器:BaseAdapter.SimpleAdapter和ArrayAdapter.其中常见的是BaseAdapter,也是个人推荐使用的适 ...

  2. MapReduce 的架构

    主从结构 主节点,只有一个 : JobTracker   ,JobTracker 一般情况下,运行在 namenode 这台机器上. 从节点,有很多个 : TaskTrackers  ,  部署在剩下 ...

  3. Mysql的Haproxy反向代理和负载均衡

    HaProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.应用到Haproxy主要是因为他免费,并且基于TCP和HTTP的应用代理. ...

  4. 异常处理之“The remote certificate is invalid according to the validation praocedure.”

    参考文章:http://brainof-dave.blogspot.com.au/2008/08/remote-certificate-is-invalid-according.html 参考文章:h ...

  5. 创建docker私人仓库

    关于创建docker私人仓库 1.1.           安装步骤 1.1.1.            直接从公共库上面下载register镜像在本地执行 1.1.1.1.             ...

  6. overflow:hidden与margin:0 auto之间的冲突

    相对于父容器水平居中的代码margin:0 auto与overflow:hidden之间存在冲突.当这两个属性同时应用在一个DIV上时,在chrome浏览器中将无法居中.至于为啥我也不明白.

  7. android Broadcast广播消息代码实现

    我用的是Fragment , 发送写在一个类中,接收写在另外一个类的内部类中.代码动态实现注册. 代码: myReceiver = new zcd.netanything.MyCar.myReceiv ...

  8. Mysql 的特殊之处

    互联网公司一般都会选择在互联网得到广泛应用的Mysql,但之前一直用微软的东东,包括数据库(MS SQLServer). 这不本以为切换数据库so easy,但是还是有些细节需要注意. 数据类型 Da ...

  9. [转]C# 使用Nlog记录日志到数据库

    本文转自:http://www.cnblogs.com/weixing/archive/2013/04/26/3044422.html 摘要]Nlog是一个很不错的.NET日志记录组件,它可以将日志输 ...

  10. Linux下的ctrl常用组合键

    在linux的命令模式下使用ctrl组合键能让操作更便捷. ctrl + k -- 剪切光标及其后边的内容: ctrl + u -- 剪切光标之前的内容: ctrl + y -- 在光标处粘贴上两个命 ...