此案例在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. 1、开篇：公司管理经验谈 - CEO之公司管理经验谈

    作为一家IT公司的CEO,我很高兴与大家通过博文的方式进行沟通交流.一方面能够将自己的成长之路以博文的方式记录下来,另一方面是能够与大家交朋友,与大家沟通公司管理方面的知识和经验. 首先,笔者在200 ...

  2. JS导出excel 兼容ie、chrome、firefox

    运用js实现将页面中的table导出为excel文件,页面显示如下: 导出的excel文件显示如下: 实现代码: <!DOCTYPE html> <html> <head ...

  3. ASP.NET MVC Routing、Areas、URLs

    webForm页面运行起来url一般是这样的:localhost:****/index.aspx,这个过程就是当你运行页面的时候,vs开发工具自带的微型服务器会打开你存在硬盘上的这个文件然后显示在浏览 ...

  4. mysql笔记

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

  5. Mysql联合，连接查询

    一. 联合查询    UNION, INTERSECT, EXCEPT UNION运算符可以将两个或两个以上Select语句的查询结果集合合并成一个结果集合显示,即执行联合查询.UNION的语法格式为 ...

  6. Hive安装（二）之表不见了

    重启一下电脑,发现表不见了,原来我用的derby存储hive的meta,网上找了一下资料,说是要用mysql, 于是安装mysql   sudo apt-get install mysql-serve ...

  7. vim 在linux下中如何设置显示行数

     在.vimrc(或/etc/vimrc)文件中输入如下文本: set tabstop=4  set softtabstop=4  set shiftwidth=4  set noexpandtab  ...

  8. [css]全屏背景图片设置,django加载图片路径

    <head><style type="text/css"> #bg { position:fixed; top:; left:; width:100%; h ...

  9. PAT 1047. 编程团体赛(20)

    编程团体赛的规则为:每个参赛队由若干队员组成:所有队员独立比赛:参赛队的成绩为所有队员的成绩和:成绩最高的队获胜. 现给定所有队员的比赛成绩,请你编写程序找出冠军队. 输入格式: 输入第一行给出一个正 ...

  10. channel Golang

    Golang, 以17个简短代码片段,切底弄懂 channel 基础 (原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的 ...