ajax先後端數據交互簡析

時間 2019-11-19

標籤 ajax 後端數據交互欄目 Ajax 简体版

原文原文鏈接

前端-------->後端

方法：POST
將要傳遞給後臺的數據在前端拼接成url字符串，經過request.send()傳遞給後臺，後臺php把獲得的數據以索引數組的方式存儲在$_POST中。接着後臺就能夠把數據插入相關聯的數據庫中。javascript

後端--------->前端

方法：GET
前端經過get方法從後端獲取數據，若是在這個過程當中須要向後端傳遞參數，就把該參數拼接在後端地址的後面。php

request.open("GET","service.php?number="+document.getElementById("keyword").value)

後臺把要傳遞的數據以索引數組的方式存儲在$_GET中，以xml的格式傳給前端，前端經過json.parse()把數據解析成json數組。接着就能夠用jq對數據進行dom操做。html

jsonp跨域

特色：不支持POST請求，只支持GET請求前端

XHR2跨域

特色：html5新引入，IE10如下不支持,但很簡單，只須要在服務端插入一行代碼。html5

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>