程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> php傳參方式1--ajax，php1--ajax

php傳參方式1--ajax，php1--ajax

編輯：關於PHP編程

php傳參方式1--ajax，php1--ajax

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。 AJAX = 異步 JavaScript和XML（標准通用標記語言的子集）。 AJAX 是一種用於創建快速動態網頁的技術。通過在後台與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。異步請求（XMLHttpRequest對象），局部刷新（本質是js dom） ajax的用途還有填寫表單時候自動判斷用戶名是否重復，比如你寫博客寫到一半突然電腦重啟了，可以恢復你寫了一半的內容。 get用於獲取數據，有字數限制，請求提包括在url中，post無限制，用於修改服務器的內容。 get是安全的請求，需要保證不修改信息。

1、ajax一般用於當前頁面，不實現頁面跳轉

2、ajax端：怎樣異步得監聽服務器端的狀態呢？通過onreadystatechange監聽readystate屬性

request.onreadystatechange = function() {

if (request.readyState===4) {

0：請求未初始化（還沒有調用 open()）。
1：請求已經建立，但是還沒有發送（還沒有調用 send()）。
2：請求已發送，正在處理中（通常現在可以從響應中獲取內容頭）。
3：請求在處理中；通常響應中已有部分數據可用了，但是服務器還沒有完成響應的生成。
4：響應已完成；您可以獲取並使用服務器的響應了。

所以一般都是判斷等於4之後進行相應的操作。

但注意這個和request的status是不一樣的

比如readystate=4但是status=404表示響應完成但是響應的內容是沒有找到文件

所以一般做法是==200的時候返回內容，其他就顯示發聲錯誤即可。

注意在post請求中要設置url 成encode，及url解碼，否則不能正確給出結果

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

但是url解碼會有一個問題，由於進行urlencoded的時候加號會自動解碼成空格，&會被解碼成變量連接符，所以如果出現這些字符必須要進行轉碼

（在做canvas上傳圖片的url的時候遇到了這個問題）

Pic = Pic.replace(/\+/g, "%2B");
Pic = Pic.replace(/\&/g, "%26");

3、服務器通過echo來返回給傳遞ajax的界面。（提示：zendstudio內置的浏覽器對於ajax的頁面總是會顯示上一次的頁面，所以改成在外置浏覽器裡運行　　preference-general-web browser裡面設置。）如果只返回一行簡單的，可以不用jason，jason可以更方便返回不同鍵值的數據。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>Demo</title>
 6 <style>
 7 body, input, select, button, h1 {
 8     font-size: 28px;
 9     line-height:1.7;
10 }
11 </style>    
12 </head>
13 
14 <body>
15 
16 <h1>員工查詢</h1>
17 
18 <label>請輸入員工編號：</label>
19 <input type="text" id="keyword" />
20 <button id="search">查詢</button>
21 <p id="searchResult"></p>
22 
23 <h1>員工新建</h1>
24 <label>請輸入員工姓名：</label>
25 <input type="text" id="staffName" /><br>
26 <label>請輸入員工編號：</label>
27 <input type="text" id="staffNumber" /><br>
28 <label>請選擇員工性別：</label>
29 <select id="staffSex">
30 <option>女</option>
31 <option>男</option>
32 </select><br>
33 <label>請輸入員工職位：</label>
34 <input type="text" id="staffJob" /><br>
35 <button id="save">保存</button>
36 <p id="createResult"></p>
37 
38 <script>
39 document.getElementById("search").onclick = function() { 
40     var request = new XMLHttpRequest();
41     request.open("GET", "serverjson.php?number=" + document.getElementById("keyword").value);
42     request.send();
43     request.onreadystatechange = function() {
44         if (request.readyState===4) {
45             if (request.status===200) { //不同的status在百度可以找到
46                 var data = JSON.parse(request.responseText);//json.parse!
47                 if (data.success) { //注意seccess也返回jason的一個鍵值
48                     document.getElementById("searchResult").innerHTML = data.msg;//json中的msg鍵值
49                 } else {
50                     document.getElementById("searchResult").innerHTML = "出現錯誤：" + data.msg;
51                 }
52             } else {
53                 alert("發生錯誤：" + request.status);
54             }
55         } 
56     }
57 }
58 
59 document.getElementById("save").onclick = function() { 
60     var request = new XMLHttpRequest();
61     request.open("POST", "serverjson.php");
62     var data = "name=" + document.getElementById("staffName").value 
63                       + "&number=" + document.getElementById("staffNumber").value 
64                       + "&sex=" + document.getElementById("staffSex").value 
65                       + "&job=" + document.getElementById("staffJob").value;
66     request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
67     request.send(data);
68     request.onreadystatechange = function() {
69         if (request.readyState===4) {
70             if (request.status===200) { 
71                 var data = JSON.parse(request.responseText);
72                 if (data.success) { 
73                     document.getElementById("createResult").innerHTML = data.msg;
74                 } else {
75                     document.getElementById("createResult").innerHTML = "出現錯誤：" + data.msg;
76                 }
77             } else {
78                 alert("發生錯誤：" + request.status);
79             }
80         } 
81     }
82 }
83 </script>
84 </body>
85 </html>

3、響應server代碼serverjason.php

<?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"); 

//定義一個多維數組，包含員工的信息，每條員工信息為一個數組
$staff = array
    (
        array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經理"),
        array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發工程師"),
        array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產品經理")
    );

//判斷如果是get請求，則進行搜索；如果是POST請求，則進行新建
//$_SERVER是一個超全局變量，在一個腳本的全部作用域中都可用，不用使用global關鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法
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":"參數錯誤"}';//jason格式
        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"] . '"}';//jason格式
            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"] . ' 信息保存成功！"}';
}

?>

4、下面是jQuery的形式

<!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>

<body>

<h1>員工查詢</h1>

<label>請輸入員工編號：</label>
<input type="text" id="keyword" />
<button id="search">查詢</button>
<p id="searchResult"></p>

<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>

<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script>
$(document).ready(function(){ 
    $("#search").click(function(){ 
        $.ajax({ 
            type: "GET",     
            url: "serverjson2.php?number=" + $("#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>

<?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"); 

//定義一個多維數組，包含員工的信息，每條員工信息為一個數組
$staff = array
    (
        array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經理"),
        array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發工程師"),
        array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產品經理")
    );

//判斷如果是get請求，則進行搜索；如果是POST請求，則進行新建
//$_SERVER是一個超全局變量，在一個腳本的全部作用域中都可用，不用使用global關鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法
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"] . ' 信息保存成功！"}';
}

?>