此案例在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. ReactiveCocoa 冷热订阅(cold subscribe, hot subscribe)

    ReactiveCocoa支持两种订阅方式,一种是冷订阅,一种是热订阅. 热订阅的特点: 1.不管有没有消息订阅着,发送者总会把消息发出去. 2.不管订阅者是什么时候订阅的,发送者总是会把相同的消息发 ...

  2. C语言中的far关键字

    最近看嵌入式文件系统TFFS的源码,看到far关键字,基础不好,惊呆了... /*Specify here which pointers may be far, if any. *Far pointe ...

  3. Eclipse for Java EE软件操作集锦（二）

    看本文章之前请确保已经了解eclipse建立web工程,如果有疑问请查看本系列文章第一篇 eclipse软件操作集锦(一) 1.我们添加一个servlet 配置一下web.xml测试一下是否能正常显示 ...

  4. 利用sphinx为python项目生成API文档

    sphinx可以根据python的注释生成可以查找的api文档,简单记录了下步骤 1:安装 pip install -U Sphinx 2:在需要生成文档的.py文件目录下执行sphinx-apido ...

  5. Oracle中如何实现Mysql的两表关联update操作

    在看<MySQL 5.1参考手册>的时候,发现MySQL提供了一种两表关联update操作.原文如下: UPDATE items,month SET items.price=month.p ...

  6. web工程常用路径的获取方法

    此文章是基于 搭建SpringMVC+Spring+Hibernate平台 一. 利用 Spring 取得web工程根路径 1. web.xml 中添加如下: <context-param> ...

  7. shell编程常用的截取字符串操作

    1.          常用的字符串操作 1.1.           替换字符串:$ echo ${var/ /_}#支持正怎表达式 / /表示搜索到第一个替换,// /表示搜索到的结果全部替换. ...

  8. 树莓派debian配置lamp【解决apache不显示php】

      Apache + MySql + Php． 1.安装Apache Apache可以用下面的命令来安装 sudo apt-get install apache2 Apache默认路径是/var/ww ...

  9. 机器学习之sklearn——聚类

    生成数据集方法:sklearn.datasets.make_blobs(n_samples,n_featurs,centers)可以生成数据集,n_samples表示个数,n_features表示特征 ...

  10. ActiveMQ笔记(2)：基于ZooKeeper的HA方案

    activemq官网给出了3种master/slave的HA方案,详见:http://activemq.apache.org/masterslave.html,基于共享文件目录,db,zookeepe ...