当前位置:首页 » 网页前端 » 前端怎么实时获取后端数据
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端怎么实时获取后端数据

发布时间: 2023-01-24 19:03:42

1. 后台接口数据变化,H5怎么实时获取

简单点说,就是前端技术与后端技术沟通,根据业务定义交互接口,交互接口的的形式可能包含:
1、后端将数据输出到HTML页面,在JS控制逻辑中需要访问数据时可以从HTML中取得。
2、定义前后端请求的接口,一般是AJAX接口,如果存在跨域问题或一些特殊的业务场景,可能也会使用JSONP或者其他方式,总之,不论是何种方式请求,目的都是动态的请求数据,然后根据返回数据刷新页面内容。返回数据的格式现在主流是使用JSON格式,但是也不排除一些特殊的业务场景需要是使用XML或其他格式的数据。

2. 写给产品经理之前端是如何展示后端数据的

移动互联网的迅猛发展让移动APP呈现出爆发之势,这两年更是移动开发程序员的春天。

今天的互联网上充斥着产品与技术的撕逼。也许你会问产品经理到底要不要懂技术?由此引申出,产品经理到底要不要懂设计?产品经理到底要不要懂运营?产品经理到底要不要懂市场?产品经理到底要不要懂业务?这所有问题的来源都是大家对于产品经理的工作认识不一致。

每个人心中都有一个产品经理的定义,产品经理在技术方面更多的是去统筹和规划。不是画画图写写文档就可以了。这里面更多的需要的是对逻辑的梳理和拆分。
例如很简单的一个app内嵌发红包的活动,产品经理需要确定整个活动的流程。从用户进入页面的那一瞬间就应该被产品经理掌控。他的每一个步骤,每一个操作会带来什么结果,有哪些变量会导致活动进程失败,这些都要产品去考虑。等到活动逻辑和过程全部梳理完成,下面就要进行拆分了。还是以发红包为例,红包中金额是客户端写死还是服务端进行计算,红包领取资格需要服务端返回几种结果,每种结果对应客户端的提示是什么,用户领取红包以后服务端需要记录那些信息(帐号,uid,领取时间,金额,是否使用等),客户端哪些地方需要加入计数器进行数据统计。总结起来其实就是,产品经理需要根据开发的每一个环节,将所有内容分类整理,并分发给不同部分的开发进行研发。最后,还需要给测试准备好check list,当测试按照check list测试完成以后,才可以上线。

以上种种都需要产品对前端如何显示后端数据有一个清晰的认识才能规划好数据如何展示。是APP写死呢还是后台返回,在用户任务进行的时候有哪些可能case。只有搞清楚这些,产品才能在实际的开发中掌握好整个项目的流程与进展,才能不被开发给糊弄。

简单的说,前端仅仅将后端返回的数据展示在页面上,不做过多的逻辑处理。前端需要关心的是,数据如何更好的展示出来,页面效果如何做出来,以及其性能问题。
而后端就是负责对这些数据进行处理,提供给前端展示。

前端一般有H5、android、ios等多端界面。数据不要轻易写死在前端里面,不然到时候三端都要修改,费时费力。而将这些变化多数据让后端进行处理,前端将这个数据取出来显示出来就行了。

举个例子吧,下图是一个美团app首页团购的展示效果

上方美食等8个icon一般为固定展示栏目,非特殊情况不会修改。那么前端一般是写死在app中,等到需要更新的时候更新app即可。

而下方猜你喜欢是一个列表,该列表数据经常变化,数据写在服务端维护,app取出数据进行展示即可。

首先,前段对页面的展示是分两步走的。
第一、在本地绘制好界面,当然此时未连api会填充一些假数据,或写一些默认值。
第二、连api进行数据获取,将数据填充进界面。

既然如此,咱们简单看下前端拿到的数据到底长什么样的吧。
现在前端获取到的数据基本是json数据。

不需要特别懂里面每一个的含义,只需要知道,前端通过"title"这个键名(key)就可以拿到"合辑护甲"这个值(value)。 "title": "合辑护甲" 这一整个就是俗称的一个字段。通过该字段前端就可以获取到列表的标题了。当然这个列表只是简单的展示用,还有诸如图片地址、优惠信息、已售份额等信息没有提供,这就是缺少字段的情况。
前后端就是通过这样的一个定义获取/传递数据的。

考虑到后期拓展、需求变更等,一般来说,涉及到计算的、可能有变动的,一律不要让前端来弄。
还是刚才那个例子,在刚才那个列表中有一个“立减5元”的橙黄色tag。
这个tag信息,如果考虑不充分,比如说,后端只提供一个数字5,然后前端在其页面写死“立减x元”,x为填入后端提供的数字,颜色固定为橙黄色。这个如果需求不修改还好,如果后期需要新增一个“满20减5元”的红色tag不傻眼了吗?
到时候只能通过升级app来解决,而且不升级的老用户将永远看不到这个红色的tag。
所以说,考虑到程序的可复用和拓展性,需要产品将后期可能新增或变更的需求考虑好,和前后端进行沟通,让前后端设计好实现,尽量降低程序的耦合和硬编码。这才能使一个产品更加健壮以及让苦逼的程序猿少加班的关键。

那么刚才那个tag的需求如何设计才合理呢?
首先是tag显示文字,全权由后端提供,可以是多个字段,由前端进行拼接。然后是tag的颜色,提供几种样式让前端判断是一种可行的办法,但是直接提供tag的色值给前端的这种方式无疑给前端展示增加了无限的可能。
是不是也要增加一个tag形状的字段呢?
俗话说,过犹不及。tag形状这种东西真的很少变更,字段太多无疑会增加开发的时间成本,而且会让人有一种舍本逐末之感。

前端获取到后端数据后,如果前端不主动刷新重新请求数据的话,这个页面的数据在该页面销毁前会一直保持不变。

如何理解?
首先,第一次进入一个页面,该页面数据为空或默认数据。此时前端会链接api请求数据。数据请求完成后,填充进页面。那么本次联网请求就完成了,在前端不进行二次数据请求之前,该页面会一直保持本次请求的数据。也就是说,就算服务端修改了数据,前端此时是不能事实的进行更新的,因为我前端不知道你数据更新了。

那么在这个需要实时更新页面数据的时候和前端讲这种需求会被前端直接回绝:“做不了”。这个时候产品咋办,怪怪妥协?最后背锅的还是自己,而且自己也不知道是真做不了还是假做不了。

实时刷新也不是不能做,只是做的成本略高,需要和后端进行配合,像微信聊天一样和后端进行长连接(socket),这样服务端数据变更前端就知道数据变更了。
当然如果稍懂页面刷新机制的话,可以要求前端在适当的时机进行页面刷新,如在页面可见的时候进行刷新,这样用户每次看到的都是最新的数据。也可以让用户主动刷新,如新增刷新功能。

产品懂技术这件事情,不仅会降低和开发同学沟通时的难度和被歧视风险,还会提升在面对开发同学意见时的判断力,会降低被技术团队忽悠的几率。同时,在需要向上级解释技术原因导致变更的情况下,也会有助于说服老板。
“闻道有先后,术业有专攻”,要相信自己所接触的开发团队是专业的,靠谱的,相信开发团队为实现需求所做出的技术方案是合理的,最优的。如果有质疑,可以加深沟通,以合适的方式提出自己的质疑。这里要补充一句的是,这个信任过程是需要建立的,也是会根据团队的表现不断变化的;同理,其实团队对于产品经理的信任度也是一样的情况。
吐槽是没有意义的,关键还是要解决问题。如果觉得产品经理不靠谱,那么有没有进行过深入的沟通?如果觉得开发不好沟通,那么有没有进行过了解,不好沟通的原因在哪里?如果当事人本身确实不可沟通,那么有没有考虑和对方的老板沟通,或者通过自己的老板如实反映情况?吐槽是最容易的,解决问题反而会很难。

3. 前端如何做与后台数据的对接

现在在前端获取后台数据的主流方式是使用Ajax异步载入0。前端页面通过Ajax向后台请求数据,后台在放回给前端页面如果你有前端js基础和后台动态页面基础的话只需要学习Ajax就可以,个把小时就能学会用了。初学的话你要先了解下B/S架构的原理,虽然简单,但是很重要,这个原理贯穿在整个动态网站的设计制作之中。具体学习的话你可以上W3school网站上学,上面相关的web设计制作资料都比较全,也浅显易懂。建议学习的顺序为HTML-》CSS-》Javascript-》XML-》PHP(或asp或.Net)。
希望对你有帮助。

4. html怎么获取后端数据获取方法介绍

1、首先先创建一个HTML,html是前端页面骨架,然后通过javascript调用后端接。口,接受返回的response,这里通过前端的一个select下拉框,调用后台的接口填充数据。
2、html中的需求是在页面在完成后select获取数据库中的值并填充其中,这里定义ajax方法。
3、然后编写后台的程序,编写servlet/controller中的获取数据库值的方法。
4、在前端根据servlet/controller返回的值在js中渲染标签中的值。
5、通过ajax的方式先移除原先的元素,然后再把数据库的值填充进去。
6、因为html中引用了jquery,所以一定要引入jquery脚本
7、开发servlet/controller时要注意返回数据的格式。

5. spring mvc 前端怎么获取后端数据

方式一 通过 URL 传参
通过 URL 挂接参数,如 /auth/getUser?userid='6'
服务器端方法可编写为: getUser(String userid) ,也可新增其他参数如HttpSession, HttpServletRequest,HttpServletResponse,Mode,ModelAndView等。
方式二 单值传参
前台调用如:
ajaxPost( "/base/user/exchangeSort" ,{ "id" :rid, "otherid" :otherid}, function(data,status){
xxxxxx
xxxxxx
});
服务器端为:
public String exchangeSort(String id, String otherid)
方式三 对象传参
前台调用如:
var org={id:id};
ajaxPost("/base/org/getOrgById", org,function(data,textStatus){
xxxx
xxxx
});
服务器端为 :
public Org getOrgById(Org org)
方式四 对象序列化传参
前台调用如:
var ueser={id:rowId};
var data=ajaxPost("/base/user/findById",{"userObj":JSON.stringify(user)},null);
或者
var ueser={ };// 创建对象
user["id"]=id;
user["name"]=$("#name").val();
user["dept"]={};// 外键对象
user["dept"]["id"]=$("#deptid").val();
ajaxPost("/base/user/addUser",{"userObj":JSON.stringify(user)},function(data){xxxx;xxxxx;});
服务器端为:
@RequestMapping ( "/findById" )
@ResponseBody
public UserInfo findById(String userObj) {
// 使用 fastJSON
UserInfo user = JSON.parseObject (userObj, UserInfo. class );
user = (UserInfo) userService . findById (UserInfo. class , user.getId());
return user;
}
方式五 列表传参
前台代码如:
var objList = new Array();
grid.forEachRow( function (rId) {
var index = grid.getRowIndex(rId);
var obj = {};
obj[ "id" ] = rId;
obj[ "user" ] = {};
obj[ "user" ][ "id" ] = $( "#userId" ).val();
// 不推荐这样的写法
//obj["kinShip"] = grid.cells(rId, 1).getValue();
//obj["name"] = grid.cells(rId, 2).getValue();
obj["kinShip"]=grid.cells(rId,grid. getColIndexById ("columnName")).getValue();
obj["name"]=grid.cells(rId,grid.getColIndexById("name")).getValue();
if (grid.cells(rId, 3).getValue()!= null && grid.cells(rId, 3).getValue()!= "" ) {
var str = grid.cells(rId, 3).getValue().split( "-" );
var day = parseFloat(str[2]);
var month = parseFloat(str[1])-1;
var year = parseInt(str[0]);
var date= new Date();
date.setFullYear(year, month, day);
obj[ "birth" ] = date;
} else {
obj[ "birth" ] = "" ;
}
obj[ "politicalStatus" ] = grid.cells(rId, 4).getValue();
obj[ "workUnit" ] = grid.cells(rId, 5).getValue();
if (grid.cells(rId, 6).isChecked())
obj[ "isContact" ] = "1" ;
else
obj[ "isContact" ] = "0" ;
obj[ "phone" ] = grid.cells(rId, 7).getValue();
obj[ "remark" ] = grid.cells(rId, 8).getValue();
obj[ "sort" ] = index;
objList.push(obj);
});

ajaxPost( "/base/user/addUpdateUserHomeList" , {
"userHomeList" : JSON.stringify(objList),
"userId" : $( "#userId" ).val()
}, function (data, status) {
xxxxx
});
服务器端:
@RequestMapping("/addUpdateUserHomeList")
@ResponseBody
public String addUpdateUserHomeList(String userHomeList, String userId) {
List<UserHome> userHomes = JSON
.parseArray(userHomeList, UserHome.class); //fastJSON
if (userHomes != null && userHomes.size() > 0) {
try {
userService.addUpdateUserHomeList(userHomes, userId);
} catch (Exception e) {
e.printStackTrace();
}
}
return "200";
}
附上ajaxPost代码:
function ajaxPost(url,dataParam,callback){
var retData=null;
$.ajax({
type: "post",
url: url,
data: dataParam,
dataType: "json",
success: function (data,status) {
// alert(data);
retData=data;
if(callback!=null&&callback!=""&&callback!=undefined)
callback(data,status);
},
error: function (err,err1,err2) {
alertMsg.error("调用方法发生异常:"+JSON.stringify(err)+"err1"+ JSON.stringify(err1)+"err2:"+JSON.stringify(err2));
}
});
return retData;
}

6. 前端怎么获取后台所有的ld所有数据啊。每个id都是不同的内容数据。

ajax, 页面完成之后就是,document ready后,向后台发送请求,后台接受到前台发送的请求之后就查询session的用户数据判断用户登录,不同的情况会发送不同的code值和数据,比如说没有登录 ,发送code=0 前台接受到之后就知道是没有登录 然后就显示 请 登 录 这样的 如果登录是code = 1 然后后面跟data= {uid = xxx}这样的 接受到code=1了 就说明已经登录了 在返回的data里获取信息显示出来就可以了

你可以去后盾人平台看一下,里面的东西不错

7. 前端集合的对象的值在后端怎么取

如果前端集合的对象是通过AJAX请求发送到后端的,那么在后端可以通过接收请求参数的方式获取对象的值。
如果前端集合的对象是通过AJAX请求发送到后端的,那么在后端可以通过接收请求参数的方式获取对象的值。
例如,如果前端通过AJAX请求发送了如下数据:
{
"name": "John",
"age": 30,
"hobbies": ["music", "sports"]
}
那么在后端可以通过如下代码获取对象的值:
// 获取请求参数
const data = request.getParameterMap()
// 获取对象的值
const name = data.get('name')
const age = data.get('age')
const hobbies = data.get('hobbies')
// 输出对象的值
console.log(name) // John
console.log(age) // 30
console.log(hobbies) // ["music", "sports"]
上面的代码通过request.getParameterMap方法获取请求参数,然后通过get方法获取对象的属性值。

8. web前端和后端怎么进行数据交互

总结有以下几种方式:
1. HTML赋值
2. JS赋值
3. script填充JSON
4. AJAX获取JSON
5. WebSocket实时传输数据
详细了解,去搜索下,我相信你会更明白。

9. 前端和后端怎么进行数据交互的

过程如下:
一、前端组织参数列表,采用get或post方式提交到指定的URL。
二、URL就是后端程序,先接收参数,根据参数值确定执行的程序功能,执行后将执行结果输出到前台。
三、Ajax将“二”中的返回值进行解析,根据相关条件更新前端界面就可以了。

10. web后端和前端是怎么连接的

web后端和前端是怎么连接的

WEB后端和WEB前端可以通过 前端模板引擎 后端模板引擎 进行连接。

后端模板引擎:

WEB前端开发人员开发好前端静态页面,然后交给WEB后端开发人员,他们再利用后端引擎模板(比如:freemarker)把前端页面与后端数据进行连接,形参一个动态页面。

前端模板引擎:

描述成前端模板引擎可能不太对,但是比较好理解吧。当前比较流行的Vue.js、Angular.js、React.js 等MVVM前端框架都自带了前端模板引擎。

WEB前端人员与WEB后端人员一起协定好数据接口格式(请求地址、数据格式、数据字段等),然后WEB前端人员与WEB后端人员同时进行项目的开发,WEB前端人员通过AJAX的方式从WEB后端获取到前端页面的相关JSON数据,然后通过MVVM前端框架把JSON数据渲染到页面里面,最终形成了一个动态页面。

网站数据处理主要分为三层。

第一,表示层,这部分可以用HTML代码,CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。也就是你用浏览器打开能看到的网页。

第二层,是业务层,这层是负责处理数据的。常用的代码语言有PHP,JSP,Java等。通过这些后台处理语言的算法来处理前台传回的数据。必要的时候进行操作数据库,然后把结果返回给前端网页。

第三层,是数据层,这个就是数据库,用来存储数据的。通过业务层的操作可以实现增删改数据库的操作。

举个例子就是这样,比方说你在网页上填一个表格然后提交会有以下几种数据传输经过:

①你接触到的是这个网页是属于表示层,这个网页一般由HTML标签结合CSS/JAVASCRIPT来实现的。 这时候你要先填入数据。

②然后你按提交触发后台处理机制,这时候数据会传到后台的代码进行处理。这部分代码根据不同网站可以使PHP,JSP,JAVA等。 代码根据程序员预设的算法将收到的数据进行处理之后会相应的对数据库进行操作,存储数据等。

③成功操作完数据库之后,业务层的代码会再向表示层也就是显示器端传回一个指令通知你表格填写成功。

这就是基本的网站数据交换逻辑了

后端会暴露出一个处理数据逻辑的接口(api),然后哦前端通过js像后端暴露的api发起请求过程可携带参数,然后后端接到请求后会返回数据给前端,前端拿到数据后会渲染在页面上

治安监控的前端是怎么连接的?

固定摄像机前端有和电源(220V转12V)全方位像像机前端一根视频线(和主机采集卡连接)一根电源线220V(连接解码器)一根通讯线(连接主机上的码转)

后端thinkphp和前端vue怎么协调

hinkphp作为服务端,为客户端提供数据。而Vue是客户端的一个JavaScript框架。便于我们对页面进行处理。
一般情况下,vue通过异步请求来获取数据。由于实例化vue时已经将相关的变量、模板等定义好了。
当获取到thinkphp回传的数据后,将会自动的把数据对应的呈现在网页上。

php在web开发中技术含量排第三(jsp,.在前),但由于php简单,开发周期短,运行速度快,很快就成为中小型网站的首选技术,像CMS全球超过70%都是php的.再说大型网站现在也很少,所以,学习php找工作要容易得多,自己想接私单也容易拿下!
就是这样的,我刚刚在后盾人知道的那边有详细的教学视频.,可以给你学习

thinkphp作为服务端,为客户端提供数据。而Vue是客户端的一个JavaScript框架。便于我们对页面进行处理。
一般情况下,vue通过异步请求来获取数据。由于实例化vue时已经将相关的变量、模板等定义好了。
当获取到thinkphp回传的数据后,将会自动的把数据对应的呈现在网页上。 你看过后很简单吧以后不会可以向我一样经常到后盾人找找相关教材看看就会了,希望能帮到你,给个采纳吧谢谢(⁄ ⁄•⁄ω⁄•⁄ ⁄)

thinkphp 设计服务端,全restful api的规范就行设计(其实只要返回json或xml就可以),
vue-resouve只是一个请求库,和jquery 的 ajax 是大同小异的