php傳參方式1--ajax-php教程-PHP中文網

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() {

<span>if (request.readyState===4) {</span>

登入後複製

0：請求未初始化（尚未調用

open()

1：請求已經建立，但是還沒有發送（還沒有呼叫 send()
2：請求已發送，正在處理中（通常現在可以從回應中獲取內容頭）。
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裡面設定。）　　preference-general-web browser裡面設定）

回傳一行簡單的，可以不用jason，jason可以更方便傳回不同鍵值的資料。

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

登入後複製

3、

回應serverjason.php

<?<span>php
</span><span>//</span><span>设置页面内容是html编码格式是utf-8</span><span>header</span>("Content-Type: text/plain;charset=utf-8"<span>); 
</span><span>//</span><span>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"); 

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

</span><span>//</span><span>判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超<strong>全局变量</strong>，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法</span><span>if</span> (<span>$_SERVER</span>["REQUEST_METHOD"] == "GET"<span>) {
    search();
} </span><span>elseif</span> (<span>$_SERVER</span>["REQUEST_METHOD"] == "POST"<span>){
    create();
}

</span><span>//</span><span>通过员工编号搜索员工</span><span>function</span><span> search(){
    </span><span>//</span><span>检查是否有员工编号的参数
    //isset检测变量是否设置；empty判断值为否为空
    //超<strong>全局变量</strong> $_GET 和 $_POST 用于收集表单数据</span><span>if</span> (!<span>isset</span>(<span>$_GET</span>["number"]) || <span>empty</span>(<span>$_GET</span>["number"<span>])) {
        </span><span>echo</span> '{"success":false,"msg":"参数错误"}';<span>//</span><span>jason格式</span><span>return</span><span>;
    }
    </span><span>//</span><span>函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
    //global 关键词用于访问函数内的<strong>全局变量</strong></span><span>global</span><span>$staff</span><span>;
    </span><span>//</span><span>获取number参数</span><span>$number</span> = <span>$_GET</span>["number"<span>];
    </span><span>$result</span> = '{"success":false,"msg":"没有找到员工。"}'<span>;
    
    </span><span>//</span><span>遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果</span><span>foreach</span> (<span>$staff</span><span>as</span><span>$value</span><span>) {
        </span><span>if</span> (<span>$value</span>["number"] == <span>$number</span><span>) {
            </span><span>$result</span> = '{"success":true,"msg":"找到员工：员工编号：' . <span>$value</span>["number"] . 
                            '，员工姓名：' . <span>$value</span>["name"] . 
                            '，员工性别：' . <span>$value</span>["sex"] . 
                            '，员工职位：' . <span>$value</span>["job"] . '"}';<span>//</span><span>jason格式</span><span>break</span><span>;
        }
    }
    </span><span>echo</span><span>$result</span><span>;
}

</span><span>//</span><span>创建员工</span><span>function</span><span> create(){
    </span><span>//</span><span>判断信息是否填写完全</span><span>if</span> (!<span>isset</span>(<span>$_POST</span>["name"]) || <span>empty</span>(<span>$_POST</span>["name"<span>])
        </span>|| !<span>isset</span>(<span>$_POST</span>["number"]) || <span>empty</span>(<span>$_POST</span>["number"<span>])
        </span>|| !<span>isset</span>(<span>$_POST</span>["sex"]) || <span>empty</span>(<span>$_POST</span>["sex"<span>])
        </span>|| !<span>isset</span>(<span>$_POST</span>["job"]) || <span>empty</span>(<span>$_POST</span>["job"<span>])) {
        </span><span>echo</span> '{"success":false,"msg":"参数错误，员工信息填写不全"}'<span>;
        </span><span>return</span><span>;
    }
    </span><span>//</span><span>TODO: 获取POST表单数据并保存到数据库
    
    //提示保存成功</span><span>echo</span> '{"success":true,"msg":"员工：' . <span>$_POST</span>["name"] . ' 信息保存成功！"}'<span>;
}

</span>?>

登入後複製

4、下面是jj

以上就介紹了php傳參方式1--ajax，包含了方面的內容，希望對PHP教學有興趣的朋友有幫助。