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

方法：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. 《Django By Example》第五章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者@ucag注:大家好,我是新来的翻译, ...

  2. SSH实战 · 唯唯乐购项目（上）

    前台需求分析 一:用户模块 注册 前台JS校验 使用AJAX完成对用户名(邮箱)的异步校验 后台Struts2校验 验证码 发送激活邮件 将用户信息存入到数据库 激活 点击激活邮件中的链接完成激活 根 ...

  3. MVC常遇见的几个场景代码分享

    本次主要分享几个场景的处理代码,有更好处理方式多多交流,相互促进进步:代码由来主要是这几天使用前端Ace框架做后台管理系统,这Ace是H5框架里面的控件效果挺多的,做兼容也很好,有点遗憾是控件效果基本 ...

  4. Node.js：理解stream

    Stream在node.js中是一个抽象的接口,基于EventEmitter,也是一种Buffer的高级封装,用来处理流数据.流模块便是提供各种API让我们可以很简单的使用Stream. 流分为四种类 ...

  5. 通过AngularJS实现前端与后台的数据对接（一）——预备工作篇

    最近,笔者在做一个项目:使用AngularJS,从而实现前端与后台的数据对接.笔者这是第一次做前端与后台的数据对接的工作,因此遇到了许多问题.笔者在这些问题中,总结了一些如何实现前端与后台的数据对接的 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. Maven 代理设置

    在maven的安装目录下 %MAVEN_HOME%/conf/setting.xml 中进行设置 <proxies>    <!-- proxy     | Specificatio ...

  8. Docker与CI持续集成/CD

    背景        Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制 ...

  9. maven 中snapshot版本和release版本的区别

    maven中的仓库分为两种,snapshot快照仓库和release发布仓库.snapshot快照仓库用于保存开发过程中的不稳定版本,release正式仓库则是用来保存稳定的发行版本.定义一个组件/模 ...

  10. 使用git进行源代码管理

    git是一款非常流行的分布式版本控制系统,使用Local Repository追踪代码的修改,通过Push和Pull操作,将代码changes提交到Remote Repository,或从Remote ...