通过输入员工编号查询员工的着力信息+新建员工的信。员工询问&lt

其三、AJAX的简单的事例

?>

实现:纯html页面+PHP页面,用来兑现查询员工跟新建员工的后台接口;

<?php
//设置页面内容是html编码格式是utf-8
//header(“Content-Type: text/plain;charset=utf-8”);
header(‘Access-Control-Allow-Origin:*’);
header(‘Access-Control-Allow-Methods:POST,GET’);
header(‘Access-Control-Allow-Credentials:true’);
header(“Content-Type: application/json;charset=utf-8”);
//header(“Content-Type: text/xml;charset=utf-8”);
//header(“Content-Type: text/html;charset=utf-8”);
//header(“Content-Type: application/javascript;charset=utf-8”);

安装,网上有。

<h1>员工询问</h1>

//判断如果是get请求,则进行查找;如果是POST请求,则开展新建
//$_SERVER是一个跨全局变量,在一个本子的整套作用域中还可用,不用采用global关键字
//$_SERVER[“REQUEST_METHOD”]回去访问页面下的请求方法
if ($_SERVER[“REQUEST_METHOD”] == “GET”) {
search();
} elseif ($_SERVER[“REQUEST_METHOD”] == “POST”){
create();
}

//定义一个几近维数组,包含员工的音信,每条员工信息也一个数组
$staff = array
    (
        array(“name” => “洪七”, “number” => “101”, “sex” =>
“男”, “job” => “总经理”),
        array(“name” => “郭靖”, “number” => “102”, “sex” =>
“男”, “job” => “开发工程师”),
        array(“name” => “黄蓉”, “number” => “103”, “sex” =>
“女”, “job” => “产品经营”)
    );

//创建员工
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 “参数错误,员工信息填写写不咸”;
return;
}
//TODO: 获取POST表单数据并保存至数据库

<body>

测试结束,如果哪里出题目虽夺哪改便是了。

html页

3.2 服务器端实现

//通过员工编号搜索员工
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;
}

接下来选取GET方式,写上我们文件之地点——localhost/AjaxDemo/server.php,点击执行/execute;

//创建员工
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”] . ‘
信息保存成功!”}’;
}

切实就是,站点就是只文件夹,在apache文件夹下就算推行,然后服务器地址记得写写清楚。最后保存之前,要将远程取消,勾选上测试。懒得放图片了,基本步骤非常粗略的。

<h1>员工新建</h1>
<label>请输入员工姓名:</label>
<input type=”text” id=”staffName” /><br>
<label>请输入员工编号:</label>
<input type=”text” id=”staffNumber” /><br>
<label>请捎员工性别:</label>
<select id=”staffSex”>
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位:</label>
<input type=”text” id=”staffJob” /><br>
<button id=”save”>保存</button>
<p id=”createResult”></p>

1、AJAX(三)

//判断如果是get请求,则开展搜寻;如果是POST请求,则进行新建
//$_SERVER是一个超全局变量,在一个剧本的尽发用域中都可用,不用动global关键字
//$_SERVER[“REQUEST_METHOD”]回来访问页面下的乞求方法
if ($_SERVER[“REQUEST_METHOD”] == “GET”) {
    search();
} elseif ($_SERVER[“REQUEST_METHOD”] == “POST”){
    create();
}

这里的经验教训就是以web开发中,后台开发的测试,不要因前台的开销,独立完成先。

<label>请输入员工编号:</label>
<input type=”text” id=”keyword” />
<button id=”search”>查询</button>
<p id=”searchResult”></p>

返时参数错误,因为我们并未get什么数据;在地方后和达到?number=101,再次实施,应该好见见,101底详细信息,文件是;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″>
<title>Demo</title>
<style>
body, input, select, button, h1 {
    font-size: 28px;
    line-height:1.7;
}
</style>   
</head>

明日说吧。。(又飞神去回顾幻世录了。。。。)

php页

–服务器端测试

<script
src=”http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js%22></script>
<script>
$(document).ready(function(){
    $(“#search”).click(function(){
        $.ajax({
            type: “GET”,    
            url:
“http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=%22 +
$(“#keyword”).val(),
            dataType: “json”,
            success: function(data) {
                if (data.success) {
                    $(“#searchResult”).html(data.msg);
                } else {
                    $(“#searchResult”).html(“出现错误:” + data.msg);
                } 
            },
            error: function(jqXHR){    
               alert(“发生错误:” + jqXHR.status); 
            },    
        });
    });
   
    $(“#save”).click(function(){
        $.ajax({
            type: “POST”,    
            url: “serverjson.php”,
            data: {
                name: $(“#staffName”).val(),
                number: $(“#staffNumber”).val(),
                sex: $(“#staffSex”).val(),
                job: $(“#staffJob”).val()
            },
            dataType: “json”,
            success: function(data){
                if (data.success) {
                    $(“#createResult”).html(data.msg);
                } else {
                    $(“#createResult”).html(“出现错误:” + data.msg);
                } 
            },
            error: function(jqXHR){    
               alert(“发生错误:” + jqXHR.status); 
            },    
        });
    });
});
</script>
</body>
</html>

3.1 简介


 


<?php
//设置页面内容是html编码格式是utf-8
header(“Content-Type: text/plain;charset=utf-8”);
//header(“Content-Type: application/json;charset=utf-8”);
//header(“Content-Type: text/xml;charset=utf-8”);
//header(“Content-Type: text/html;charset=utf-8”);
//header(“Content-Type: application/javascript;charset=utf-8”);

//提示保存成功
echo “员工:” . $_POST[“name”] . ” 信息保存成功!”;
}

 –php代码

//定义一个差不多维数组,包含员工的音,每条员工信息吗一个数组
$staff = array
(
array(“name” => “洪七”, “number” => “101”, “sex” => “男”, “job”
=> “总经理”),
array(“name” => “郭靖”, “number” => “102”, “sex” => “男”, “job”
=> “开发工程师”),
array(“name” => “黄蓉”, “number” => “103”, “sex” => “女”, “job”
=> “产品经营”)
);

透过工具实现——fiddler。

在fiddler主页面,右边有一个composer的标签页;

3.3 客户端的贯彻

外就是是php的始末了。

–DW

//遍历$staff多维数组,查找key值为number的职工是否在,如果是,则改返回结果
foreach ($staff as $value) {
if ($value[“number”] == $number) {
$result = “找到员工:员工编号:” . $value[“number”] . “,员工姓名:” .
$value[“name”] .
“,员工性别:” . $value[“sex”] . “,员工职位:” . $value[“job”];
break;
}
}
echo $result;
}

  hi

然后编写程序在adobe dreamwaverCs6

本身还要食言了,但我或不要脸的回了。。。

我这里用的是wamp集合端,很多物都未用变。

//通过员工编号搜索员工
function search(){
//检查是不是出职工编号的参数
//isset检测变量是否设置;empty判断值为呢为空
//超全局变量 $_GET 和 $_POST 用于收集表单数据
if (!isset($_GET[“number”]) || empty($_GET[“number”])) {
echo “参数错误”;
return;
}
//函数之外声明的变量拥有 Global 作用域,只能以函数以外展开走访。
//global 关键词用于看函数内之全局变量
global $staff;
//获取number参数
$number = $_GET[“number”];
$result = “没有找到员工。”;

不再一步一步于闹,直接叫有。

接下来又选择POST方式;则地址一样圈就足以免填参数,但再也下要描写上Content-Type:
application/x-www-form-urlencoded,告诉服务器如果怎么开。在太下方写及数,执行,就抱成功保存。

确立站点先,放在www文件夹下,然后服务器什么的为只要协调收拾一下。

完成:查询员工信息,通过输入员工编号查询员工的核心信息+新建员工的音讯,包含员工姓名,编号,性别,职位;