ajax前后端数据交互API,ajax前后端数据交互简析

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

方法：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"].'信息保存成功！"}';

}

前端

Document

*{

margin: 0;padding:0;

font-size: 16px;

font-family: "微软雅黑";

}

员工查询

请输入员工编号:

查询

员工新建

请输入员工姓名：

请输入员工编号：

请输入员工性别：

男

女

请输入员工职位：

保存

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

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

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

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

web前后端数据交互

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

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

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

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

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

SpringMVC前后端数据交互总结

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

Spring MVC前后端数据交互总结

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

day67 前后端数据交互

目录 一.前后端传输数据的编码格式(contentType) 1 form表单 2 ajax请求 二.ajax发送json格式数据 三.ajax发送文件 四.django自带的序列化组件(drf做铺垫 ...

使用ORM进行前后端数据交互

使用ORM进行数据交互 前期准备 必备知识:ORM操作,数据库多表操作.Django部分知识. 三张表:班级.老师.学生 一对多关系:班级与学生 多对多关系:班级与老师 #创建班级表 class Cl ...

随机推荐

解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

DataBase --- Intellij IDEA 14.1.4使用Java连接SQL Server教程

Java连接数据库的方法大体分为两种:正向连接和反向连接.反向连接需要编译器提供相关的插件来支持,目前主流的java IDE都支持反向连接.这里主要对正向连接做一个经验总结. 一.数据库的配置 1.新 ...

Cheatsheet: 2014 08.01 ~ 08.31

Web Slow Server? This is the Flow Chart You're Looking For A Strolll Through Node: Introduction .NET ...

Mac生存手册

最近刚从Linux转到了Mac系统上,感觉好的地方是再也不折腾了,什么GNOME, KDE, XFCE,各种发行版本都远离我而去了.当然Mac下很多好软件都是要付费的,我只能绕着走了: 1. 命令行, ...

Oracle数据库之PL/SQL程序设计基础

PL/SQL程序设计基础 一.PL/SQL块结构 前边我们已经介绍了PL/SQL块的结构,再来回顾一下: DECLARE /* * 声明部分——定义常量.变量.复杂数据类型.游标.用户自定义异常 */ ...

移动端网页meta设置和响应式

苏宁易购WAP的meta分析 响应式 meta设置 媒体查询时读的width为viewport的宽度.viewport宽度为手机分辨率.比如note2 1280*720.需要重置为设备 640*360 ...

【linux之挂载，Raid，LVM】

一.挂载,卸载 挂载:将新的文件系统关联至当前根文件系统卸载:将某文件系统与当前根文件系统的关联关系移除 cat /etc/mtab 存储着已经挂载的文件系统 (跟 mount 一样) mount:显 ...

java垃圾回收机制，以及常用的回收算法

记得之前去平安面试的时候,面试官问到了垃圾回收,我当时也就是说说了垃圾回收的原理,但是具体有哪些实现策略,我当时是懵的. 概念: Java的垃圾回收机制是Java虚拟机提供的能力,用于在空闲时间以不定 ...

Spark-RPC理解

基本架构 Akka Actor式RPC架构 Spark采用的是AkkaActor架构实现RPC,但是实际使用过程为了兼容不同节点之间的文件下载,采用Netty来实现Actor功能. Spark RPC ...