web前端与后台数据交互很难?马上告诉你如何搞定
前端请求数据URL由谁来写?
在开发中,URL主要是由后台来写的,写好了给前端开发者。如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数,这里的查询参数也就是URL请求的参数。
接口文档主要由谁来写?
接口文档也是主要由后台开发者来写的,因为直接跟数据打交道的就是后台,后台是最清楚,数据库里面有什么数据,能返回什么数据.前端开发只是数据的被动接受者。所以接口文档也主要是由后台来完成的,前端只是接口文档的使用者,使用过程中,发现返回的数据不对,则需要跟后台进行商量,由后台来修改。切记 前端不要随意更改接口文档,除非在取得后台开发人员的同意的情况下。总的来讲,接口文档主要由后台来设计、修改,前端开发者起到了辅助的作用。
前端开发与后台交互的数据格式主要是什么?
主要是JSON,XML现在用的不多
前端开发的后台交互原理?
在项目的时候,我们前后端会大概说一下接口地址,前端请求的参数,后端返回的参数,然后大家就开始写,写的差不多的时候,大家调一下接口看一下返回的数据,没问题就可以了。
前端请求参数的形式
GET和POST两种方式
对安全性不高 采用get方便
post要比get安全
GET - 从指定的服务器中获取数据
POST - 提交数据给指定的服务器处理
前端应该告知后台哪些有效信息,后台才能返回前端想的数据的呢?
先将要展示的页面内容进行模块划分,将模块的内容提取出来,以及方便前端的一些标志值等,将所有想要的内容和逻辑告知后端,后端就会去数据库里面去查找相应的数据表中去获得相应的内容,或者图片地址信息。URL中的参数主要是根据后台需要,如果后台需要一个参数作为查询的辅助条件 前端在URL数据请求时就传递参数。
我们应该怎么把页面这些信息有效传达给后台,以及后台是如何获取到这些数据?
总的来讲:所有前端请求的URL后面的参数,都是辅助后台数据查询的。如果不需要参数,那么后台就会直接给个URL给前端。
前端应该如何回拒一些本不属于自己做的一些功能需求或任务?
在与后台打交道中,我们经常遇到这种情况,有时候明明后台来处理某个事件很简单,后台非要你来做,这时候我们应该懂得去回绝他。
原则:前端就是负责把数据展示在页面上
发挥:这就需要我们对一个需求,一个任务的要有清晰认识了,如果对任务含糊不清,自己都没搞明白,你只能受后台摆布了。最后也会因为任务没有完成而备受责难了。
当前端在调用数据接口时,发现有些数据不是我们想要的,那么前端应该怎么办呢或者怎么跟后台讲呢?
首先要把请求的URL和返回的数据以及在页面的展示的情况给跟后台看,这样有理有据,后台开发人员是不会说什么的,否则,后台会很不耐烦的,甚至骂你的可能都有,本身做后台比较难,尤其在查询数据,取数据,封装数据方面都比较难处理。
为什么需要在请求的时候传入参数?
因为后台在查询数据库的时候需要条件查询。
DEMO:
var data=JSON.stringify({“page”: {“pagenow”: 1,“pagesize”: 20},“file”:{“name”:“jpg”},“catalogs”:[{“id”:1},{“id”:2}]});
$.ajax({
type:“POST”,
url:"//访问的url",
data:data,
contentType:“application/json”,
success:function(data){
//显示数据
}
});
注意:
一、contentType
contentType,可以是application/x-www-form-urlencoded这种默认类型的,不过当后台有struts等框架的话,会在action之前拦截请求,并把request body 里面的值都读出来,导致我们不能再request里面读取到值,只能依赖struts的domain model
所有如果有后台用这种机制的话,那就需要更改contentType:application/json,这样子strust就不会拦截请求了。
二、stringify和parseJSON
这两种方法不能乱用,一不小心的话就会导致后台解析不了数据,正确的用法在上面。
stringify是将Json转义,parseJSON是将json去除转义并解析成对象
总结
前端传后台json,应该传字符串过去,不能传Object对象,而且要适当指定contentType。
通过怎么样的学习,才能成为合格的WEB前端工程师?如果现在的你很迷茫,可以+web前端扣扣裙:956766604 免费网课在线学习以及问题解答、项目指导服务,配合强大的学习工具,带你完成九大实战项目,经历从零基础到专业前端工程师的完美蜕变。
- web前端与后台数据交互--Json
- HttpWebResponse Post 前端控件数据,后台如何接收?
- 关于Web前端做前后台数据交互的那些事儿
- web前端新手总结(一):前、后端是如何进行数据交互的?
- 浅谈web前端与后台数据交互
- 引用第三方进行Android前端与web后台的数据交互
- web前端后台数据的交互方式总结
- PHP后台数据处理及与web端进行数据交互
- WEB前后端交互(UI界面和数据内容)如何实现
- web前后台数据交互
- SpringMVC+Hibernate利用ajax实现前端后台数据交互
- vue实现数据的绑定以及如何进行和后台php就行数据的交互
- Android与web服务器数据交互编程---3网络爬虫项目实现虚拟浏览器的jsp后台运行
- javaWeb开发总结 ---- 前端数据插入到后台
- JavaWeb开发$.ajax如何向后台传输数据
- 后台通过Model传实体类数据到前端页面,如何取实体类中的list
- 前端如何动态生成一个支付二维码,后台需接收到账单数据,然后用啥插件还是用啥技术能够实现
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- web 前后台数据交互的方式
- Esp8266 进阶之路21 【高级篇】浅谈 esp8266 如何在本地局域网网络情况下实现最大效率地和前端实现数据交互。(附带Demo)