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

方法：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. 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁，Atomic原子类)

    前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...

  2. MIP改造常见问题二十问

    在MIP推出后,我们收到了很多站长的疑问和顾虑.我们将所有疑问和顾虑归纳为以下二十个问题,希望对大家理解 MIP 有帮助. 1.MIP 化后对其他搜索引擎抓取收录以及 SEO 的影响如何? 答:在原页 ...

  3. 小白解决CENTOS7错误:Cannot find a valid baseurl for repo: base/7/x86_6

    刚入手的MacBook想着学点东西,本汪还是决定玩玩CentOS服务器,安装好了VirtualBox + CentOS. 打开一看,懵逼了!命令行! 行吧,先装个图形界面: $sudo yum gro ...

  4. Redis的简单动态字符串实现

    Redis 没有直接使用 C 语言传统的字符串表示(以空字符结尾的字符数组,以下简称 C 字符串), 而是自己构建了一种名为简单动态字符串(simple dynamic string,sds)的抽象类 ...

  5. 如何安全的将VMware vCenter Server使用的SQL Server Express数据库平滑升级到完整版

    背景: 由于建设初期使用的vSphere vCenter for Windows版,其中安装自动化过程中会使用SQL Server Express的免费版数据库进行基础环境构建.而此时随着业务量的增加 ...

  6. Android 工具-adb

    Android 工具-adb 版权声明:本文为博主原创文章,未经博主允许不得转载. Android 开发中, adb 是开发者经常使用的工具,是 Android 开发者必须掌握的. Android D ...

  7. 3种web会话管理的方式

    http是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的.当然它知道是哪个客户端地址发过来的,但是对于我们的应用来说,我们是靠用户来管理,而不是靠客户端. ...

  8. Struts2入门(六)——国际化

    一.前言 1.1.国际化简介 国际化是指应用程序在运行的时候,根据客户端请求来自的国家地区.语言的不同而显示不同的界面(简单说就是根据你的地区显示相关地区的语言,如果你现在在英国,那么显示的语言就是英 ...

  9. Node.js学习笔记——Node.js开发Web后台服务

    一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...

  10. Eclipse出现"Running Android Lint has encountered a problem"解决方案

    安装eclipse for android 时候的错误记录,转载自:http://blog.csdn.net/chenyufeng1991/article/details/47442555 (1)打开 ...