Ajax學習筆記

Ajax

什么是ajax

AJAX即“Asynchronous JavaScript and XML”（異步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。
以前，幾乎所有的網站都由HTML頁面實現，服務器處理每一個用戶請求都需要重新加載網頁。這樣的處理方式效率不高。用戶的體驗是所有頁面都會消失，再重新載入，即使只是一部分頁面元素改變也要重新載入整個頁面，不僅要刷新改變的部分，連沒有變化的部分也要刷新。這會加重服務器的負擔。
這可以用異步加載來解決。ajax實現了局部刷新頁面。

在了解ajax怎么使用之前，應該先了解XMLHttpRequest對象。

XMLHttpRequest對象

聲明一個XMLHttpRequest對象：

var request =new XMLHttpRequest();(IE5和IE6不支持這種聲明)
兼容IE5和IE6的聲明：
var request;
if(window.XMLHttpRequest){
Request=new XMLHttpRequest();//IE7+,和chrome，Firefox等瀏覽器;}
else{
request=new ActiveXObject(“Microsoft.XMLHTTP”);//IE5,IE6
}

Http

◎Http：

◆一套計算機通過網絡進行通信的規則；
◆一種無狀態協議（無狀態協議：不保留持久的連接）；
◆使客戶（瀏覽器）能夠向web服務器請求信息和服務。

◎HTTP請求：

●步驟：1.建立TCP連接；
2.Web瀏覽器向Web服務器發送請求命令；
3.Web瀏覽器發送請求頭信息；
4.Web服務器應答；
5.Web服務器發送應答頭信息；
6.Web服務器向瀏覽器發送數據；
7.Web服務器關閉TCP連接。
●HTTP請求一般由四部分組成：
1.HTTP請求的方法或動作，比如是get還是post請求；
2.正在請求的URL（請求的地址）；
3.請求頭，包含一些客戶端環境信息、身份驗證信息等；
4.請求體（請求正文），可以包含客戶提交的查詢字符串信息、表單信息等。

●GET：一般用于信息獲取（常用于查詢）；使用URL傳遞參數（變量顯示在URL中，所有人可見）；對所發送信息的數量有限制（一般在2000個字符）。
POST：一般用于修改服務器上的資源；對所發送的信息數量無限制。（不在URL中顯示，對其他人不可見，信息在請求體中）（常用于發送表單數據，新建、修改等）。

◎HTTP響應：

一般由三部分組成：
1.一個數字和文字組成的狀態碼，用來顯示請求是成功還是失敗；
2.響應頭，響應頭也和請求頭一樣包含許多有用的信息，例如服務器類型、日期時間、內容類型和長度等；
3.響應體（響應正文）。

XMLHttpRequest發送請求

open(method,url,asyn) //(請求方法GET/POST，請求地址，同步（false）/異步（true，默認為true，可不寫）)；
send(string) //（將請求發送到服務器，GET請求參數在URL中，所以參數string可寫none，也可不寫；POST時參數string要寫）

XMLHTTPRequest取得響應：
responseText：獲得字符串形式的響應數據；
responseXML：獲得XML形式的響應數據；
status和statusTest：以數字和文本的形式返回HTTP狀態碼；
getAllResponseHeader（）：獲取所有的響應報頭；
getResponseHeader（）：查詢響應中的某個字段的值；
readyState屬性：這個屬性的變化代表了服務器的響應的變化。
0：請求未初始化，open還沒有調用；
1：服務器連接已建立，open已經調用；
2：請求已接受，也就是接收到頭信息了；
3：請求處理中，也就是接收到響應主體了；
4: 請求已完成，且響應已就緒，也就是響應完成了。
eg：var request=new XMLHttpRequest();
request.open(“GET”,“get.php”,true);
request.send();
request.onreadystatechange=function(){
if(request.readyState===4&&request.status===200){
//做一些事情 request.responseText
}
}

php

◎php:是一種創建動態交互性站點的服務器端腳本語言；
（服務器端腳本語言？HTML和js是客戶端語言，用于實現頁面呈現、特效；服務器端腳本語言：用于從服務器端的存取）
◎PHP：（兼容幾乎所有web服務器，支持幾乎所有數據庫）
◆能夠生成動態頁面內容；
◆能夠創建、打開、讀取、寫入、刪除以及關閉服務器上的文件；
◆能夠接收表單數據；
◆能夠發送并取回cookies；
◆能夠添加、刪除、修改數據庫中的數據；
◆能夠限制用戶訪問網站中的某些頁面等。

PHP測試頁面

● Php腳本以<?Php開頭,以?>結尾
● Php文件的默認文件擴展名是.php
● Php語句以分號結尾(;)

例子(員工查詢和添加)：



文／恰皮（簡書作者）
原文鏈接：http://www.jianshu.com/p/a5898dae1f1b
著作權歸作者所有，轉載請聯系作者獲得授權，并標注“簡書作者”。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</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="staffnumber"/>
<label>請輸入員工姓名:</label>
<input type="text" id="staffname" />
<label>請選擇員工性別:</label>
<select id="staffsex"><option>男</option><option>女</option>
</select>
<label>請輸入員工職位:</label>
<input type="text" id="staffjob" />
<button id="save">保存</button>
<p id="createResult"></p><script type="text/javascript">
//為“查詢”按鈕添加點擊事件：點擊時查詢相關員工：
    document.getElementById("search").onclick=function(){var request=new XMLHttpRequest();//生成XHR對象；
        request.open("GET","server.php?number="+document.getElementById("keyword").value);//XHR對象的open方法：請求方法：get；請求地址：server.php，參數為輸入的編號；
        request.send();//發送請求
//監聽request的狀態的改變：readyState的改變：
        request.onreadystatechange=function () {if(request.readyState==4){//如果readyState為4即服務器響應已完成；if(request.status===200){//如果request的狀態碼為200；
document.getElementById("searchResult").innerHTML=request.responseText;//將查詢結果顯示；
                }else{alert("發生錯誤"+request.status);}}}}
//為“保存”按鈕添加點擊事件：點擊時添加相關員工：
document.getElementById("save").onclick=function(){var add_staff=new XMLHttpRequest();//生成XHR對象；
        add_staff.open("POST","server.php");//XHR對象的open方法：請求方法：post；請求地址：server.php；var data="number="+document.getElementById("staffnumber").value+"&name="+document.getElementById("staffname").value+"&sex="+document.getElementById("staffsex").value+"&job="+document.getElementById("staffjob").value;//將填寫的數據保存到data；     add_staff.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//設置請求頭的content-type為獲取表單信息；
        add_staff.send(data);//發送請求，post的參數為data；
//監聽add_staff的狀態的改變：readyState的改變：
        add_staff.onreadystatechange=function () {if(add_staff.readyState==4){/如果readyState為4即服務器響應已完成；if(add_staff.status===200){如果request的狀態碼為200；
//將響應內容顯示出來：  document.getElementById("createResult").innerHTML=add_staff.responseText;
                }else{alert("發生錯誤"+add_staff.status);}}}}
</script>
</body>
</html>

Server.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 "參數錯誤";return;}//函數之外聲明的變量擁有 Global 作用域，只能在函數以外進行訪問。//global 關鍵詞用于訪問函數內的全局變量global $staff;//獲取number參數$number = $_GET["number"];$result = "沒有找到員工。";//遍歷$staff多維數組，查找key值為number的員工是否存在，如果存在，則修改返回結果foreach ($staff as $value) {if ($value["number"] == $number) {$result = "找到員工：員工編號：" . $value["number"] . "，員工姓名：" . $value["name"] . "，員工性別：" . $value["sex"] . "，員工職位：" . $value["job"];break;}}echo $result;
}//創建員工
function create(){parse_str(file_get_contents('php://input'), $_POST);//解決post拿不到內容;//判斷信息是否填寫完全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表單數據并保存到數據庫//提示保存成功echo "員工：" . $_POST["name"] . " 信息保存成功！";
}文／恰皮（簡書作者）
原文鏈接：http://www.jianshu.com/p/a5898dae1f1b
著作權歸作者所有，轉載請聯系作者獲得授權，并標注“簡書作者”。

json

◎JSON：javascript對象表示法；
◎JSON是存儲和交換文本信息的語法，類似XML。它采用鍵值對的方式來組織，易于人們閱讀和編寫，同時也易于機器解析和生成。
◎JSON是獨立于語言的，也就是說不管什么語言，都可以解析JSON，只需要按照JSON的規則來就行。

●JSON的長度和xml格式比起來很短小；
●JSON的讀寫速度更快；
●JSON可以使用javascript內建的方法直接進行解析，轉換成javascript對象，非常方便。

Json語法規則

Json數據的書寫格式是：名稱/值對，eg：“name”：“大豬”。
●Json的值可以是下面這些類型：
◆數字（整數或浮點數），eg：123,1.23；
◆字符串（在雙引號中）；
◆邏輯值（true或false）；
◆數組（在方括號中）；
◆對象（在花括號中）；
◆Null；

Eg：
{//大括號括起來表示一個json對象;
“staff”：[
{“name”: “洪七”, “age”:70},
{“name”: “郭靖”, “age”:35},
{“name”: “黃蓉”, “age”:30}
]
}

Json解析

◎Eval和JSON.parse:

Tip:在代碼中使用eval是很危險的!特別是用它執行第三方的json數據(其中可能包含惡意代碼)時,盡可能使用JSON.parse()方法解析字符串本身方法還可以捕捉json中的語法錯誤.
Eg:
●使用eval:
var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}';
var jsonobj=eval('('+jsondata+')');
alert(jsonobj.staff[0].name);
結果:彈出 “洪七”;
●使用JSON.parse():
var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}';
var jsonobj=JSON.parse(jsondata);
alert(jsonobj.staff[0].name);
結果:彈出 “洪七”;
■如果代碼中出現錯誤:
●使用eval時,無法檢驗代碼中的錯誤,例如例子中的alert,eval方法不會檢查出這個錯誤,于是彈出 “123”,再彈出 “洪七”.
var jsondata='{"staff":[{"name":"洪七","age":alert(123)},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}';
var jsonobj=eval('('+jsondata+')');
alert(jsonobj.staff[0].name);
●使用JSON.parse()方法時會檢查出alert這個錯誤,出現VM530:1 Uncaught SyntaxError: Unexpected token a in JSON at position 29(…),不會彈出任何信息.
Var jsondata='{"staff":[{"name":"洪七","age":alert(2)},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}';
var jsonobj=JSON.parse(jsondata);
alert(jsonobj.staff[0].name);

tip:☆Json格式化和校驗:
在線校驗工具:jsonlint.com

對上面的例子 “員工查詢和添加”用json改寫:
首先約定:
{
“success”:true;//表示請求是否成功;
“msg”: “xxx”;//表示請求的返回信息;
}

例子代碼修改:

客戶端代碼:



文／恰皮（簡書作者）
原文鏈接：http://www.jianshu.com/p/a5898dae1f1b
著作權歸作者所有，轉載請聯系作者獲得授權，并標注“簡書作者”。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</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="staffnumber"/>
<label>請輸入員工姓名:</label>
<input type="text" id="staffname" />
<label>請選擇員工性別:</label>
<select id="staffsex"><option>男</option><option>女</option>
</select>
<label>請輸入員工職位:</label>
<input type="text" id="staffjob" />
<button id="save">保存</button>
<p id="createResult"></p>
<script type="text/javascript">document.getElementById("search").onclick=function(){var request=new XMLHttpRequest();request.open("GET","server.php?number="+document.getElementById("keyword").value);request.send();request.onreadystatechange=function () {if(request.readyState==4){if(request.status===200){var data=JSON.parse(request.responseText);//解析服務器返回的信息;if(data.success){document.getElementById("searchResult").innerHTML=data.msg;}else {document.getElementById("searchResult").innerHTML="出現錯誤:"+data.msg;}}else{alert("發生錯誤"+request.status);}}}}document.getElementById("save").onclick=function(){console.log('haha');var add_staff=new XMLHttpRequest();add_staff.open("POST","server.php");var data="number="+document.getElementById("staffnumber").value+"&name="+document.getElementById("staffname").value+"&sex="+document.getElementById("staffsex").value+"&job="+document.getElementById("staffjob").value;
add_staff.setRequestHeader("Content-Type","application/x-www-form-urlencoded");add_staff.send(data);add_staff.onreadystatechange=function () {if(add_staff.readyState==4){if(add_staff.status===200){var data=JSON.parse(add_staff.responseText);if(data.success){document.getElementById("createResult").innerHTML=data.msg;}else {document.getElementById("createResult").innerHTML = "出現錯誤" + data.msg;}}else{alert("發生錯誤"+add_staff.status);}}}}
</script>
</body>
</html>

服務器端server.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":"參數錯誤"}';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(){parse_str(file_get_contents('php://input'), $_POST);//判斷信息是否填寫完全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"] . ' 信息保存成功！"}';
}文／恰皮（簡書作者）
原文鏈接：http://www.jianshu.com/p/a5898dae1f1b
著作權歸作者所有，轉載請聯系作者獲得授權，并標注“簡書作者”。

用jquery實現ajax

Jquery.ajax([settings])
●Type:類型, “POST”或者 “GET”,默認為 “GET”
●Url:發送請求地址;
●Data:是一個對象,連同請求發送到服務器的數據;
●dataType:預期服務器返回的數據類型.如果不指定,jquery將自動根據HTTP包MIME信息來智能判斷,一般我們采用json格式,可以設置為 “json”.
●Success:是一個方法,請求成功后的回調函數.傳入返回后的數據,以及包含成功代碼的字符串.
●Error:是一個方法,請求失敗時調用此函數,傳入XMLHttpResult對象.
用jquery實現ajax改寫例子:



文／恰皮（簡書作者）
原文鏈接：http://www.jianshu.com/p/a5898dae1f1b
著作權歸作者所有，轉載請聯系作者獲得授權，并標注“簡書作者”。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</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="staffnumber"/>
<label>請輸入員工姓名:</label>
<input type="text" id="staffname" />
<label>請選擇員工性別:</label>
<select id="staffsex"><option>男</option><option>女</option>
</select>
<label>請輸入員工職位:</label>
<input type="text" id="staffjob" />
<button id="save">保存</button>
<p id="createResult"></p><script src="jquery-3.1.0.min.js"></script>
<script>$(document).ready(function () {$("#search").click(function () {$.ajax({type:"GET",url:"server.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:"server.php",dataType:"json",data:{name:$("#staffname").val(),number:$("#staffnumber").val(),sex:$("#staffsex").val(),job:$("#staffjob").val()},success:function (data) {if(data.success){$("#createResult").html(data.msg);}else {$("#createResult").html("出現錯誤:"+data.msg);}},error:function (jqXHR) {alert("發生錯誤"+jqXHR.status);}});});});/*document.getElementById("search").οnclick=function(){var request=new XMLHttpRequest();request.open("GET","server.php?number="+document.getElementById("keyword").value);request.send();request.onreadystatechange=function () {if(request.readyState==4){if(request.status===200){var data=JSON.parse(request.responseText);if(data.success){document.getElementById("searchResult").innerHTML=data.msg;}else {document.getElementById("searchResult").innerHTML="出現錯誤:"+data.msg;}}else{alert("發生錯誤"+request.status);}}}}document.getElementById("save").οnclick=function(){console.log('haha');var add_staff=new XMLHttpRequest();add_staff.open("POST","server.php");var data="number="+document.getElementById("staffnumber").value+"&name="+document.getElementById("staffname").value+"&sex="+document.getElementById("staffsex").value+"&job="+document.getElementById("staffjob").value;add_staff.setRequestHeader("Content-Type","application/x-www-form-urlencoded");add_staff.send(data);add_staff.onreadystatechange=function () {if(add_staff.readyState==4){if(add_staff.status===200){var data=JSON.parse(add_staff.responseText);if(data.success){document.getElementById("createResult").innerHTML=data.msg;}else {document.getElementById("createResult").innerHTML = "出現錯誤" + data.msg;}}else{alert("發生錯誤"+add_staff.status);}}}}*/
</script>
</body>
</html>

跨域

◎一個域名地址的組成:

當協議、子域名、主域名、端口號中的任意一個不相同時，都算作不同域。
◎不同域之間相互請求資源，就算做跨域，比如：http://www.abc.com/index/html請求http://www.efg.com/service.php
◎Javascript出于安全方面的考慮，不允許跨域調用其他頁面的對象。
◎跨域就是因為javascript同源策略的限制，a.com域名下的js無法操作b.com或是c.a.com域名下的對象。
◎Javascript出于安全方面的考慮，不允許跨域調用其他頁面的對象。
●www.abc.com/index.html調用www.abc.com/service.php（沒有寫協議默認是http，所以協議、主域名、子域名和端口號都相同，非跨域）
●www.abc.com/index.html調用www.efg.com/service.php(子域名不同，跨域）
●www.abc.com/index.html調用bbs.abc.com/service.php（子域名不同，跨域）
●www.abc.com/index.html調用https://www.abc.com/service.php(協議不同，一個是http，一個是https，跨域）
●www.abc.com/index/html調用www.abc.com:81/service.php(端口號不同，跨域）

處理跨域的方法：

用jsonp處理跨域:

jsonp可用于解決主流瀏覽器的跨域數據訪問的問題(即可以處理get不可以處理post)

修改例子:



文／恰皮（簡書作者）
原文鏈接：http://www.jianshu.com/p/a5898dae1f1b
著作權歸作者所有，轉載請聯系作者獲得授權，并標注“簡書作者”。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</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="staffnumber"/>
<label>請輸入員工姓名:</label>
<input type="text" id="staffname" />
<label>請選擇員工性別:</label>
<select id="staffsex"><option>男</option><option>女</option>
</select>
<label>請輸入員工職位:</label>
<input type="text" id="staffjob" />
<button id="save">保存</button>
<p id="createResult"></p><script src="jquery-3.1.0.min.js"></script>
<script>$(document).ready(function () {$("#search").click(function () {$.ajax({type:"GET",url:"http://localhost:8080/try2/server.php?number="+$("#keyword").val(),//客戶端請求的url地址屬于跨域,端口號不同.
                dataType:"jsonp",//修改dataType為jsonp;
                jsonp:"callback",//添加jsonp屬性為自定義的callback;
                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:"server.php",dataType:"json",data:{name:$("#staffname").val(),number:$("#staffnumber").val(),sex:$("#staffsex").val(),job:$("#staffjob").val()},success:function (data) {if(data.success){$("#createResult").html(data.msg);}else {$("#createResult").html("出現錯誤:"+data.msg);}},error:function (jqXHR) {alert("發生錯誤"+jqXHR.status);}});});});</script>
</body>
</html>

服務器端代碼server.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(){$jsonp=$_GET["callback"];//檢查是否有員工編號的參數//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 = $jsonp.'({"success":false,"msg":"沒有找到員工。"})';//遍歷$staff多維數組，查找key值為number的員工是否存在，如果存在，則修改返回結果foreach ($staff as $value) {if ($value["number"] == $number) {$result = $jsonp.'({"success":true,"msg":"找到員工：員工編號：' . $value["number"] . '，員工姓名：' . $value["name"] .'，員工性別：' . $value["sex"] . '，員工職位：' . $value["job"].'"})';break;}}echo $result;
}//創建員工
function create(){parse_str(file_get_contents('php://input'), $_POST);//判斷信息是否填寫完全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"] . ' 信息保存成功！"}';
}文／恰皮（簡書作者）
原文鏈接：http://www.jianshu.com/p/a5898dae1f1b
著作權歸作者所有，轉載請聯系作者獲得授權，并標注“簡書作者”。

用XHR2處理跨域:

Html5提供的XMLHttpRequest Level2已經實現了跨域訪問以及其他的一些新功能.
IE10以下的版本都不支持.
在服務器端做一些小的修改即可:
Header(‘Access-Control-Allow-Origin:’);
Header(‘Access-Control-Allow-Methods:POST,GET’);
Eg:
<?php
//設置頁面內容是html編碼格式是utf-8
//header("Content-Type: text/plain;charset=utf-8");
header("Content-Type: application/json;charset=utf-8");
header("Access-Control-Allow-Origin:");//*代表所有域都可以訪問,也可以設置一個特定的域名;
header("Access-Control-Allow-Methods:POST,GET");

?

轉載于:https://www.cnblogs.com/BrokenIce/p/5817429.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/372407.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/372407.shtml
英文地址，請注明出處：http://en.pswp.cn/news/372407.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

美團點評DBProxy讀寫分離使用說明

美團點評DBProxy讀寫分離使用說明

目的 因為業務架構上需要實現讀寫分離&#xff0c;剛好前段時間美團點評開源了在360Atlas基礎上開發的讀寫分離中間件DBProxy&#xff0c;關于其介紹在官方文檔已經有很詳細的說明了&#xff0c;其特性主要有&#xff1a;讀寫分離、負載均衡、支持分表、IP過濾、sql語句黑名單、…
閱讀更多...
apriori算法c++_關聯分析——基于Apriori算法實現

apriori算法c++_關聯分析——基于Apriori算法實現

電子商務推薦系統主要是通過統計和挖掘技術&#xff0c;根據用戶在網站上的行為,主動為用戶提供推薦服務&#xff0c;從而提高網站體驗。而根據不同的業務場景&#xff0c;推薦系統需要滿足不同的推薦粒度&#xff0c;包括搜索推薦,商品類目推薦,商品標簽推薦&#xff0c;店鋪推…
閱讀更多...
在Oracle Coherence中分發Spring Bean

在Oracle Coherence中分發Spring Bean

本文展示了如何通過使用Oracle Coherence中的EntryProcessor和可移植對象格式&#xff08;POF&#xff09;功能來分發Spring Bean。 Coherence通過EntryProcessor API支持無鎖編程模型。 此功能通過減少網絡訪問并在條目上執行隱式的低級鎖定來提高系統性能。 此隱式低級鎖定功…
閱讀更多...
postman測試實例--斷言

postman測試實例--斷言

讓我們來看看postman測試的一些例子。 其中大部分是作為內部postman片段。 大多數測試是為單行的JavaScript語句一樣簡單。 只要你想一個請求&#xff0c;你可以有很多的測試。注意&#xff1a;一個響應已從服務器接收后測試腳本運行。測試實例1.設置環境變量 postman.setEnvir…
閱讀更多...
python實現單例模式的幾種方式_基于Python中單例模式的幾種實現方式及優化詳解...

python實現單例模式的幾種方式_基于Python中單例模式的幾種實現方式及優化詳解...

單例模式單例模式(Singleton Pattern)是一種常用的軟件設計模式&#xff0c;該模式的主要目的是確保某一個類只有一個實例存在。當你希望在整個系統中&#xff0c;某個類只能出現一個實例時&#xff0c;單例對象就能派上用場。比如&#xff0c;某個服務器程序的配置信息存放在一…
閱讀更多...
android-鈴聲的設置與播放

android-鈴聲的設置與播放

在android系統中&#xff0c;不同鈴聲存放的鈴聲路徑&#xff1a;/system/media/audio/ringtones 來電鈴聲/system/media/audio/notifications 短信通知鈴聲/system/media/audio/alarms 鬧鐘鈴聲鈴聲的設置&#xff1a;import java.io.File; import andr…
閱讀更多...
Apache Commons SCXML：有限狀態機實現

Apache Commons SCXML：有限狀態機實現

本文提到有限狀態機&#xff08;FSM&#xff09;&#xff0c;SCXML&#xff08;狀態圖可擴展標記語言&#xff09;和Apache Common的SCXML庫。 本文還提供了基本的ATM有限狀態機示例代碼。 有限狀態機&#xff1a; 您可能還記得計算機科學課程中的有限狀態機。 FSM用于設計計算…
閱讀更多...
第二十章、分離應用程序邏輯并處理事件

第二十章、分離應用程序邏輯并處理事件

理解委托 委托是對方法的引用。&#xff08;之所以稱為委托&#xff0c;是因為一旦被調用&#xff0c;就將具體的處理“委托”給引用的方法&#xff09; 委托對象引用了方法&#xff0c;和將int賦值給int變量一樣&#xff0c;是將方法引用賦給委托對象。 Processor p new Proc…
閱讀更多...
pymol怎么做底物口袋表面_怎么從文獻中發掘一篇新文章？

pymol怎么做底物口袋表面_怎么從文獻中發掘一篇新文章？

本文來自微信公眾號&#xff1a;X-MOLNews可能你的導師也曾說過這樣的話——盯著Nature、Science級別的文章做&#xff0c;可能最終會中十分的文章&#xff1b;如果盯著十分的文章做&#xff0c;可能最終發出來也就五六分&#xff1b;但如果就為了發個文章混畢業&#xff0c;很…
閱讀更多...
如何分析線程轉儲– IBM VM

如何分析線程轉儲– IBM VM

本文是我們的線程轉儲分析系列的第4部分&#xff0c;它將為您概述什么是IBM VM的JVM線程轉儲以及您將找到的不同線程和數據點。 您將看到和學習??到&#xff0c;IBM VM Thread Dump格式是不同的&#xff0c;但是提供了更多現成的故障排除數據。 在這一點上&#xff0c;您應該…
閱讀更多...
VMware vSphere克隆虛擬機

VMware vSphere克隆虛擬機

參考資料&#xff1a;http://blog.csdn.net/shen_jz2012/article/details/484167711. 首先將你所要克隆的虛擬機關掉2. 選擇你的ESXI服務器選中"配置"&#xff0c;然后選中存儲器右鍵你的存儲介質&#xff0c;比如我的是datastore1&#xff0c;選擇“瀏覽數據存儲”。…
閱讀更多...
將本地jar包倒入maven項目類庫中

將本地jar包倒入maven項目類庫中

有兩種方法&#xff1a;1.本地下載maven并配置環境變量&#xff0c;然后運行cmd控制臺輸入 mvn install:install-file -Dfile本地jar路徑 -DgroupId -DartifactId -Dpackagingjar -Dversion -DgeneratePomtrue. 2.直接在pom.xml中對應的依賴下面添加<scope>system&l…
閱讀更多...
Spring和JSF集成：分頁

Spring和JSF集成：分頁

處理大型數據集時&#xff0c;通常需要以分頁格式顯示數據。 分頁是一個有趣的問題&#xff0c;因為它傾向于跨越應用程序的所有層&#xff0c;從視圖層通過應用程序服務一直到對數據庫的原始調用。 在獲取分頁數據時&#xff0c;有一些非常好的解決方案。 如果您使用的是JPA&a…
閱讀更多...
三重積分平均值_直角坐標系下的三重積分的幾何可視化解釋圖解高等數學

三重積分平均值_直角坐標系下的三重積分的幾何可視化解釋圖解高等數學

12.4 直角坐標系下的三重積分三重積分假設 F(x,y,z) 為一個空間有界閉區域 D 上的函數. D 為下面立體橢球所占區域. 將空間區域分割成小長方塊. 體積記為 ΔVk, 其長寬高分別為Δxk, Δyk, Δzk , 并有下列的求和式:觀察下面動畫, 當空間不斷分割, 每個小方塊的體積 ΔVk 不斷變…
閱讀更多...
最短網絡Agri-Net

最短網絡Agri-Net

【例4-11】、最短網絡Agri-Net【問題描述】農民約翰被選為他們鎮的鎮長&#xff01;他其中一個競選承諾就是在鎮上建立起互聯網&#xff0c;并連接到所有的農場。當然&#xff0c;他需要你的幫助。約翰已經給他的農場安排了一條高速的網絡線路&#xff0c;他想把這條線路共享給…
閱讀更多...
cors-synchronous-requests-not-working-in-firefox

cors-synchronous-requests-not-working-in-firefox

http://stackoverflow.com/questions/16668386/cors-synchronous-requests-not-working-in-firefox轉載于:https://www.cnblogs.com/diyunpeng/p/5829594.html
閱讀更多...
硬盤接口協議

硬盤接口協議

硬盤是電腦主要的存儲媒介之一&#xff0c;由一個或者多個鋁制或者玻璃制的碟片組成。碟片外覆蓋有鐵磁性材料。硬盤有固態硬盤&#xff08;SSD 盤&#xff0c;新式硬盤&#xff09;、機械硬盤&#xff08;HDD 傳統硬盤&#xff09;、混合硬盤&#xff08;HHD 一塊基于傳統機械…
閱讀更多...
圖的表示

圖的表示

Python 數據結構與算法——圖&#xff08;Graph&#xff09; 1. 鄰接矩陣 vs 鄰接表&#xff08;壓縮的鄰接矩陣&#xff09; 鄰接矩陣的缺點是&#xff1a; 空間占用與結點數的平方成正比&#xff0c;可能帶來很大的浪費&#xff1b;鄰接矩陣不容易增加新的結點&#xff0c;不…
閱讀更多...
在Java Web應用程序中阻止CSRF

在Java Web應用程序中阻止CSRF

跨站點請求偽造攻擊&#xff08;CSRF&#xff09;在Web應用程序中非常常見&#xff0c;如果允許&#xff0c;可能會造成重大危害。 如果您從未聽說過CSRF&#xff0c;建議您查看有關它的OWASP頁面 。 幸運的是&#xff0c;阻止CSRF攻擊非常簡單&#xff0c;我將向您展示它們的工…
閱讀更多...
windows命令行無法啟動redis_windows系統安裝redis

windows命令行無法啟動redis_windows系統安裝redis

1、下載最新redis https://github.com/MicrosoftArchive/redis/releases我選擇下載msi版本的2.雙擊下載包安裝3.設置redis環境變量&#xff0c;把redis路徑配置到系統變量path值中4啟動redis&#xff0c;cmd進入安裝好redis文件夾 輸入&#xff1a;如果redis啟動出錯Creating S…
閱讀更多...
最新文章

Copyright @ 2022~2023