此案例在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. 2016总结Android面试题

    1.简单的设计模式:单例模式:在系统中一个类只有一个实例. 分为懒汉模式和饿汉模式.饿汉模式的代码如下:public class Singleten{private static singleten ...

  2. swift-字符和字符串

    OC定义字符: char charValue = 'a'; swift定义字符: var charValue : Character = "a" Unicode 国际标准的文本编码 ...

  3. javaScript对象－基本包装类型的详解

    本人按书上的内容大致地把javaScript对象划分成“引用类型”.“基本包装类型”和“内置对象”三块内容. 我们这篇先了解下基本包装类型的详细用法吧! 一.我们先解下相关概念: 1.引用类型的值(对 ...

  4. mysql笔记

    查看当前版本: SELECT VERSION(); 查看当前时间: SELECT NOW(); 查看当前当前用户: SELECT USER(); 创建数据库:CREATE DATABASE 数据库名字 ...

  5. Windows Server 2012 虚拟化实战：网络（一）

    虚拟化对于计算的抽象,大家可能相对熟悉,也许都有在单机使用诸如Virtual PC或者Virtual Box的经验.使用的这些虚拟化软件的第一印象就是我们的CPU可以同时运行多套不同的操作系统,并且其 ...

  6. MySQL 数据库的备份与恢复

    一.MySQL 常见的备份方式 1. 直接拷贝数据库文件(物理拷贝) 2. 使用 mysqldump 工具备份 3. 使用 mysqlhotcopy 工具备份 4. 使用 mysql 的主从同步复制, ...

  7. how2heap分析系列:0

    新学期到了,给学弟们写点东西, https://github.com/shellphish/how2heap 这个how2heap挺不错的,讲述了heap上几种不同的漏洞利用技术,在后面发的几篇中我会 ...

  8. 使用jekins自动构建部署java maven项目（jdk1.7+tomcat7.0+jenkins2.19.3）

    1.下载jenkins 地址:https://jenkins.io/index.html 本人下载了2.19.3版本的war包:jenkins.war 2.安装jenkins 拷贝jenkins.wa ...

  9. UVA10325 The Lottery（容斥原理）

    题意: 给n,m,和m个数(k1~km).求1~n中有多少个数不是(k1~km)中任意一数的倍数. 题解: 容斥模板题.反面考虑,a的倍数有n/a个:既是a,也是b的倍数,即lcm(a,b)的倍数有n ...

  10. 解读ASP.NET 5 & MVC6系列（13）：TagHelper

    在新版的MVC6中,微软提供了强大的TagHelper功能,以便让我们摆脱如下的臃肿代码: @Html.LabelFor(model => model.FullName) @Html.EditF ...