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>