您的位置：首页 > 其它

ajax前后端数据交互简析

2016-11-01 16:02 555 查看

前端-------->后端

方法：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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航