前端与后端数据交互的方式之ajax
前端与后端数据交互的方式之Ajax
对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水。接下来就让我来浅谈一下前后端数据交互的方式。
web前端与后端是怎么连接的
网站数据处理主要分为三层。
第一层,表示层,这部分可以用HTML代码,CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。也就是你用浏览器打开能看到的网页。
第二层,是业务层,这层是负责处理数据的。常用的代码语言有PHP,JSP,Java等。通过这些后台处理语言的算法来处理前台传回的数据。必要的时候进行操作数据库,然后把结果返回给前端网页。
第三层,是数据层,这个就是数据库,用来存储数据的。通过业务层的操作可以实现增删改数据库的操作。
①你接触到的是这个网页是属于表示层,这个网页一般由HTML标签结合CSS/JAVASCRIPT来实现的。 这时候你要先填入数据。
②然后你按提交触发后台处理机制,这时候数据会传到后台的代码进行处理。这部分代码根据不同网站可以使PHP,JSP,JAVA等。 代码根据程序员预设的算法将收到的数据进行处理之后会相应的对数据库进行操作,存储数据等。
③成功操作完数据库之后,业务层的代码会再向表示层也就是显示器端传回一个指令通知你表格填写成功
一.从前端向后端传递参数方法
1.前端通过form表单,当你点击submit按钮发送数据给后台
2.后端会前端请求的反应,接收数据,处理数据再返回给前端。
二.通过ajax传递参数,ajax主要有两种方式get和post(这里我们主要讲解ajax)
什么是Ajax
1、Ajax的全称是Asynchronous JavaScript and XML,即异步JavaScript+XML。
2、它是一种技术方案,但并不是一种新技术。
3、它依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象。这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口,使得浏览器可以发出HTTP请求与接收HTTP响应,实现在页面不刷新的情况下和服务端进行数据交互
Ajax和XMLHttpRequest 两者的关系:我们使用XMLHttpRequest对象来发送一个Ajax请求。
关于ajax的优缺点:
get和post两种方法:
1.POST主要用来发送数据,GET主要用来接受数据;
2.PSOT发送数据的安全性较好,而GET较差;
3.POST发送数据不限制大小,而GET大小受限2~100k。
什么时候用GET和POST:在数据获取时用GET方式,在操作数据时应使用POST方式。
Ajax的使用
.var AJAX=new XMLHttpRequest( ); .AJAX.open('get','data/test.json',true); 第一个参数:POST||GET 第二个参数:要请求的url 第三个参数:接受一个布尔值,决定请求的方式
为true时,服务器请求是异步进行的,也就是脚本执行send() 方法后不等待服务器的执行结果,而是继续执行脚本代码;
为false时,服务器请求是同步进行的,也就是脚本执行send() 方法后等待服务器的执行结果的返回,若在等待过程中超时,则不再等待,继续执行后面的脚本代码! .ajax.onreadystatechange = function(){
if (ajax.readyState == && ajax.status == ){
func_succ(ajax.responseText);
}else if(ajax.readyState == && ajax.status != ){
//alert("ajax faild readyState:"+ajax.readyState+" status:"+ajax.status);
}
}; .ajax.send(null);
ajax.readystate
前端与后端数据交互的方式之ajax的更多相关文章
- 两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...
- 对GraphQL-BFF:微服务背景下的前后端数据交互方案的研究-------引用
随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...
- web前后端数据交互
前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...
- 前后端数据交互(八)——请求方法 GET 和 POST 区别
WEB 开发同学一看 get 和 post 请求方法的区别,第一感觉都是 So easy! 学习ajax.fetch.axios时,发送网络请求携带参数时,都需要分别处理get和post的参数.所以我 ...
- vue-resource的使用,前后端数据交互
vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载: https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...
- 前后端数据交互处理基于原生JS模板引擎开发
json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...
- 前后端数据交互利器--Protobuf
Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...
- Python Django 前后端数据交互 之 前端向后端发送数据
Python Django 之 前端向后端发送数据
- SpringMVC前后端数据交互总结
控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是ser ...
随机推荐
- ARC模式下delloc()注意事项
1.ARC模式下delloc()调用触发时机是对象被销毁,如self.属性=nil 2.ARC模式下delloc()里面不需要手动调用[super dealloc]; 因为系统已经自动调用,多此一举的 ...
- SSM图片
非关系型数据,redis,mongoDB关系型数据,mysql,oracle 1.springmvc+spring+mybatis1.导入jar2.书写配置xml(applicationContext ...
- 接口返回[object,Object]解决方法
1.我们请求接口时有时会返回[object,Object],[object,Object],[object,Object].... 这个我们使用JSON.stringfity(data),就可以解决.
- 浙大PAT CCCC L3-015 球队“食物链” ( 搜索 && 剪枝 )
题目链接 题意 : 有 n 个球队,给出主客场胜负图,找出一个序列 1.2.3..... 使得 1 战胜过 2 .2 战胜过 3.3 战胜过 4..... n 战胜过 1 ( 这个序列是 1~n 的其 ...
- HDU 4027 Can you answer these queries? (线段树成段更新 && 开根操作 && 规律)
题意 : 给你N个数以及M个操作,操作分两类,第一种输入 "0 l r" 表示将区间[l,r]里的每个数都开根号.第二种输入"1 l r",表示查询区间[l,r ...
- 进阶3: zookeeper-3.4.9.tar.gz和hbase-1.2.4-bin.tar.gz 环境搭建(hbase 伪分布式)
前提条件: 成功安装了 jdk1.8, hadoop2.7.3 注意条件: zookeeper,hbase 版本必须要和hadoop 安装版本相互兼容,否则容易出问题: 本次:安装包 zookee ...
- 查看windosw服务器型号和序列号
查看服务器型号 wmic csproduct get name 查看序列号 wmic bios get serialnumber 查看内存 wmic memorychip list brief === ...
- C++中一些容易迷惑的语法点总结
#include<iostream> #include<cstring> using namespace std; int main(){ ][]={{,,},{,,}}; ] ...
- Java 线程状态有哪些?
线程状态有 5 种,新建,就绪,运行,阻塞,死亡.关系图如下: 1. 线程 start 方法执行后,并不表示该线程运行了,而是进入就绪状态,意思是随时准备运行,但是真正何时运行,是由操作系统决定的,代 ...
- c#枚举类型操作方法总结-1
关于枚举类型用法总结两点,分享如下: 1. 根据枚举值获取枚举值的描述信息,可以封装一个方法供调用: // enumValue是传入的枚举值 public string GetEnumDescrp ...