此案例在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. 拥抱.NET Core，如何开发跨平台的应用并部署至Ubuntu运行

    之前写了一篇博文宣布Rabbit Rpc跨平台了"拥抱.NET Core,跨平台的轻量级RPC:Rabbit.Rpc",在过程中尝试了如何编写支持跨平台的类库与应用程序,也尝试了在 ...

  2. MySQL备份原理详解

    备份是数据安全的最后一道防线,对于任何数据丢失的场景,备份虽然不一定能恢复百分之百的数据(取决于备份周期),但至少能将损失降到最低.衡量备份恢复有两个重要的指标:恢复点目标(RPO)和恢复时间目标(R ...

  3. 64位下pwntools中dynELF函数的使用

    这几天有同学问我在64位下怎么用这个函数,于是针对同一道题写了个利用dynELF的方法 编译好的程序 http://pan.baidu.com/s/1jImF95O 源码在后面 from pwn im ...

  4. 5-sql查询

    sql查询 一．Sql查询 1.查看表字段信息 用scott账户登陆 1).查看scott账户下的所有表 2).查看员工表字段信息 3).查看部门表字段信息 4).查看工资等级字段信息 2.查询表 1 ...

  5. java遍历给定目录，树形结构输出所有文件，包括子目录中的文件

    (转自:http://blog.csdn.net/gangwazi0525/article/details/7569701) import java.io.File; public class Rea ...

  6. JS--实现简单轮播(一)

    <!DOCTYPE html><html><head> <title></title> <meta charset=utf-8> ...

  7. [No00009B]win10快捷键大全

    微软为Win10命令行(Command Prompt)加入了Ctrl + V的支持 Win10新增功能快捷键大全: 贴靠窗口:Win + 左/右 >  Win + 上/下 > 窗口可以变为 ...

  8. 如何将网页的title前面的图标替换成自己的图标

    首先要准备自己的图标,图标必须是.ico格式的图片,网上有很多在线工具可以将自己的图片转换成ico格式的图片,这里给大家介绍两个网站 在线ico转换工具:生成的图标是可以选尺寸的,原图片的大小不限制 ...

  9. 如何在ASP.NET Core中使用Redis

    注:本文提到的代码示例下载地址> https://code.msdn.microsoft.com/How-to-use-Redis-in-ASPNET-0d826418 Redis是一个开源的内 ...

  10. java日志学习笔记

    一．日志家族 Log4j一开始就很强大,在jdk自带日志系统之前,apache就曾经尝试把log4j划为java的一部分,不知为何没能成功,sun还是用了自己很弱的日志系统.为了兼容各个日志系统,ap ...