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

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

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. ASP.NET MVC 请求路径相关参数的获取

    Request.ApplicationPath / Request.CurrentExecutionFilePath /Home/Index Request.FilePath /Home/Index ...

  2. C#学习资源

    # 视频 C#程序设计 Cousera(推荐) # 文档 C#教程 MSDN Microsoft API 和参考目录

  3. C# i=0;i=i++，i的值是多少？

    昨天看群里dalao们聊天,有一个人出来问这个问题 这个题应该是挺常见的 int i = 0, t;        for(t = 0;t <= 5;t++)        {          ...

  4. JS图片上传预览插件制作（兼容到IE6）

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  5. C# await和async

    基础阅读:http://www.cnblogs.com/jesse2013/p/async-and-await.html 答疑阅读:http://www.cnblogs.com/heyuquan/ar ...

  6. Entity Framework 延伸系列目录

    1.采用MiniProfiler监控EF与.NET MVC项目 2.采用EntityFramework.Extended 对EF进行扩展 3.EntityFramework执行存储过程中遇到的那些坑 ...

  7. duang～免费的学习视频来啦：学霸君之全栈测试

    学霸君向童鞋们推荐一款 同名学霸学习 视频教程 重点是完全免费收看学习噢!!! 今天 学霸君推荐腾讯课堂的学霸君之全栈测试 复制下方链接至腾讯课堂中报名学习 https://ke.qq.com/cou ...

  8. 基于fis3的组件可视化道路

    首先说明一下,即使不熟悉fis3,阅读文本应该也会有所收获. 本文以fis-parser-imweb-tplv2插件为模板插件,目的不在于使用哪个模板,而是组件可视化的实现思路,不必担心. 先说说模板 ...

  9. UWP简单示例(三)：快速开发2D游戏引擎

    准备 IDE:VisualStudio 2015 Language:VB.NET/C# 图形API:Win2D MSDN教程:UWP游戏开发 游戏开发涉及哪些技术? 游戏开发是一门复杂的艺术,编码方面 ...

  10. nginx服务器安装及配置文件详解

    nginx在工作中已经有好几个环境在使用了,每次都是重新去网上扒博客,各种编译配置,今天自己也整理一份安装文档和nginx.conf配置选项的说明,留作以后参考.像负载均衡配置(包括健康检查).缓存( ...