前端-------->后端
方法：POST
將要傳遞給后台的數據在前端拼接成url字符串，通過request.send()傳遞給后台，后台php把得到的數據以索引數組的方式存儲在$_POST中。接着后台就可以把數據插入相關聯的數據庫中。
后端--------->前端
方法：GET
前端通過get方法從后端獲取數據，如果在這個過程中需要向后端傳遞參數，就把該參數拼接在后端地址的后面。
request.open("GET","service.php?number="+document.getElementById("keyword").value)
后台把要傳遞的數據以索引數組的方式存儲在$_GET中，以xml的格式傳給前端，前端通過json.parse()把數據解析成json數組。接着就可以用jq對數據進行dom操作。
jsonp跨域
特點：不支持POST請求，只支持GET請求
XHR2跨域
特點：html5新引入，IE10以下不支持,但很簡單，只需要在服務端插入一行代碼。
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');
示例代碼(jsonp跨域)
后端php(xampp)
header("Content-type:application/json;charset=utf-8");
$staff=array
(
array("name"=>"王軍","number"=>"101","sex"=>"男","job"=>"CEO"),
array("name"=>"王夏","number"=>"102","sex"=>"男","job"=>"CTO"),
array("name"=>"李冰","number"=>"103","sex"=>"女","job"=>"產品經理")
);
if ($_SERVER["REQUEST_METHOD"]=="GET") {
search();
}elseif($_SERVER["REQUEST_METHOD"]=="POST"){
create();
}
function search(){
$jsonp=$_GET["callback123"];
if (!isset($_GET["number"])||empty($_GET["number"])){
echo '{"success":false,"msg":"參數錯誤"}';
return;
}
global $staff;
$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(){
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;
}
echo '{"success":true,"msg":"員工:'.$_POST["name"].'信息保存成功！"}';
}
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;padding:0;
font-size: 16px;
font-family: "微軟雅黑";
}
</style>
</head>
<body>
<h1>員工查詢</h1>
<label>請輸入員工編號:</label>
<input type="text" id="keyword">
<button id="search">查詢</button>
<p id="searchResult"></p><br>
<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><br>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</html>