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

方法：POST

将要传递给后台的数据在前端拼接成url字符串，通过request.send()传递给后台，后台php把得到的数据以索引数组的方式存储在$_POST中。接着后台就可以把数据插入相关联的数据库中。

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

方法：GET

前端通过get方法从后端获取数据，如果在这个过程中需要向后端传递参数，就把该参数拼接在后端地址的后面。

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

后台把要传递的数据以索引数组的方式存储在$_GET中，以xml的格式传给前端，前端通过json.parse()把数据解析成json数组。接着就可以用jq对数据进行dom操作。

jsonp跨域

特点：不支持POST请求，只支持GET请求

XHR2跨域

特点：html5新引入，IE10以下不支持,但很简单，只需要在服务端插入一行代码。

  1. header('Access-Control-Allow-Origin:*');
  2. header('Access-Control-Allow-Methods:POST,GET');

示例代码(jsonp跨域)

后端php(xampp)
  1. header("Content-type:application/json;charset=utf-8");
  2.   $staff=array
  3.   (
  4.   array("name"=>"王军","number"=>"101","sex"=>"男","job"=>"CEO"),
  5.   array("name"=>"王夏","number"=>"102","sex"=>"男","job"=>"CTO"),
  6.   array("name"=>"李冰","number"=>"103","sex"=>"女","job"=>"产品经理")
  7. );
  8.   if ($_SERVER["REQUEST_METHOD"]=="GET") {
  9.     search();
  10.   }elseif($_SERVER["REQUEST_METHOD"]=="POST"){
  11.     create();
  12.   }
  14.   function search(){
  15.     $jsonp=$_GET["callback123"];
  16.     if (!isset($_GET["number"])||empty($_GET["number"])){
  17.       echo '{"success":false,"msg":"参数错误"}';
  18.       return;
  19.     }
  20.     global $staff;
  21.     $number=$_GET["number"];
  22.     $result=$jsonp.'({"success":false,"msg":"没有找到该员工"})';
  24.     // 遍历$staff多维数组，查找key值为number的员工是否存在
  25.     foreach ($staff as $value) {
  26.       if ($value["number"]==$number) {
  27.         $result=$jsonp.'({"success":true,"msg":"找到员工:员工编号:'.$value["number"].',员工姓名:'.$value["name"].',员工性别:'.$value["sex"].',员工职位:'.$value["job"].'"})';
  28.         break;
  29.       }
  30.     }
  31.     echo $result;
  32.   }
  34.   function create(){
  35.     if (!isset($_POST["name"]) || empty($_POST["name"])
  36.       || !isset($_POST["number"]) || empty($_POST["number"])
  37.       || !isset($_POST["sex"]) || empty($_POST["sex"])
  38.       || !isset($_POST["job"]) || empty($_POST["job"])
  39.     ) {
  40.       echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';
  41.       return;
  42.     }
  43.     echo '{"success":true,"msg":"员工:'.$_POST["name"].'信息保存成功！"}';
  44.   }
前端
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <style>
  9.     *{
  10.       margin: 0;padding:0;
  11.       font-size: 16px;
  12.       font-family: "微软雅黑";
  13.     }
  14.   </style>
  15. </head>
  16. <body>
  17.   <h1>员工查询</h1>
  18.   <label>请输入员工编号:</label>
  19.   <input type="text" id="keyword">
  20.   <button id="search">查询</button>
  21.   <p id="searchResult"></p><br>
  22.   <h1>员工新建</h1>
  23.   <label>请输入员工姓名：</label>
  24.   <input type="text" id="staffName"><br>
  25.   <label>请输入员工编号：</label>
  26.   <input type="text" id="staffNumber"><br>
  27.   <label>请输入员工性别：</label>
  28.   <select id="staffSex">
  29.     <option>男</option>
  30.     <option>女</option>
  31.   </select><br>
  32.   <label>请输入员工职位：</label>
  33.   <input type="text" id="staffJob"><br>
  34.   <button id="save">保存</button>
  35.   <p id="createResult"></p><br>
  36. </body>
  37. <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
  38. </script>
  39. </html>

ajax前后端数据交互简析的更多相关文章

  1. 两种方法实现asp.net方案的前后端数据交互（aspx文件、html+ashx+ajax）

    一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...

  2. 前后端数据交互处理基于原生JS模板引擎开发

    json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...

  3. web前后端数据交互

    前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...

  4. 前后端数据交互(八)——请求方法 GET 和 POST 区别

    WEB 开发同学一看 get 和 post 请求方法的区别,第一感觉都是 So easy! 学习ajax.fetch.axios时,发送网络请求携带参数时,都需要分别处理get和post的参数.所以我 ...

  5. vue-resource的使用，前后端数据交互

    vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载:   https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...

  6. 对GraphQL-BFF：微服务背景下的前后端数据交互方案的研究-------引用

    随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...

  7. 前后端数据交互利器--Protobuf

    Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...

  8. 前后端数据交互(二)——原生 ajax 请求详解

    一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件 其他 j ...

  9. SpringMVC前后端数据交互总结

    控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是ser ...

随机推荐

  1. 【Machine Learning】KNN算法虹膜图片识别

    K-近邻算法虹膜图片识别实战 作者:白宁超 2017年1月3日18:26:33 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  2. 0-1背包问题蛮力法求解（c++版本）

    // 0.1背包求解.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream>   #define ...

  3. ABP文档 - 嵌入的资源文件

    文档目录 本节内容: 简介 创建嵌入的文件 暴露嵌入的文件 使用嵌入的文件 简介 一个web应用里,客户端包含javascript,css,xml等文件,这此文件被添加到一个web项目后,发布成独立的 ...

  4. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  5. ASP.NET Core应用中如何记录和查看日志

    日志记录不仅对于我们开发的应用,还是对于ASP.NET Core框架功能都是一项非常重要的功能特性.我们知道ASP.NET Core使用的是一个极具扩展性的日志系统,该系统由Logger.Logger ...

  6. 初探Vue

    Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...

  7. 一篇文章看懂TPCx-BB（大数据基准测试工具）源码

    TPCx-BB是大数据基准测试工具,它通过模拟零售商的30个应用场景,执行30个查询来衡量基于Hadoop的大数据系统的包括硬件和软件的性能.其中一些场景还用到了机器学习算法(聚类.线性回归等).为了 ...

  8. iOS逆向工程之Hopper+LLDB调试第三方App

    LLDB是Low Level Debugger的简称,在iOS开发的调试中LLDB是经常使用的,LLDB是Xcode内置的动态调试工具.使用LLDB可以动态的调试你的应用程序,如果你不做其他的额外处理 ...

  9. python通过protobuf实现rpc

    由于项目组现在用的rpc是基于google protobuf rpc协议实现的,所以花了点时间了解下protobuf rpc.rpc对于做分布式系统的人来说肯定不陌生,对于rpc不了解的童鞋可以自行g ...

  10. 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...