前后端如何进行数据交互

1、数据是怎么发送到后端？

2、后端是怎么接收到前端发送过来的数据？

3、后端怎么对前端发送来的数据进行处理？

4、处理完之后又怎么写入数据库，以及给前端返回处理结果？

网站数据处理主要分为三层。
第一层，表示层，这部分可以用HTML代码，CSS/Javascript代码来实现等。通过前端代码可以实现网页的布局和设计。这层又可以称为显示层。也就是你用浏览器打开能看到的网页。
第二层，是业务层，这层是负责处理数据的。常用的代码语言有PHP,JSP，Java等。通过这些后台处理语言的算法来处理前台传回的数据。必要的时候进行操作数据库，然后把结果返回给前端网页。
第三层，是数据层，这个就是数据库，用来存储数据的。通过业务层的操作可以实现增删改数据库的操作。
①你接触到的是这个网页是属于表示层，这个网页一般由HTML标签结合CSS/JAVASCRIPT来实现的。这时候你要先填入数据。
②然后你按提交触发后台处理机制，这时候数据会传到后台的代码进行处理。这部分代码根据不同网站可以使PHP,JSP，JAVA等。代码根据程序员预设的算法将收到的数据进行处理之后会相应的对数据库进行操作，存储数据等。
③成功操作完数据库之后，业务层的代码会再向表示层也就是显示器端传回一个指令通知你表格填写成功

从前端向后端传递参数方法

一、通过表单传递参数

1.前端部分，在前端jsp页面设置form表单，确定需要传递的参数name让用户输入，通过点击按钮后submit()提交到后台

<% String message = (String)request.getAttribute("message"); if(StringUtils.isNotBlank(message)){ %> <%=message %> <% } %>

2.后台对前端请求的反应，接收数据，处理数据以及返回数据。

@RequestMapping(method=RequestMethod.POST)
public String dologin(String sfzh, String pwd, RedirectAttributes redirectAttributes){

 User query = new User();query.setUserAccount(sfzh);HttpSession session = HttpSessionUtil.getHttpSession();List<User> userlist = userService.select(query);

二．通过ajax传递参数（有post和get写法）

1.ajax是如何将前端数据传到后台的

         $(".nav").accordion({//accordion: true,speed: 500,closedSign: '<img src="<%=path%>/images/menu_close.png"/>',openedSign: '<img src="<%=path%>/images/menu_open.png"/>'});}});
}

$.ajax({

                     type: "POST",//type是ajax的方法url : "<%=path%>/resource/usermenus",//参数url,要把参数传到什么地方data : {parentid:parentid,parentpath:parentpath},//传递什么数据success : function(data){//sucess表示，当数据返回成功后要怎么做，返回的数据存储在data

2.后台对前端请求的反应，接收数据，处理数据以及返回数据。

@ResponseBody
@RequestMapping(value = “usermenus”)
public Map<String, Object> usermenus(String parentid, String parentpath) {
UserDetail user = HttpSessionUtil.getSessionUser();
String appadmin = Config.getInstance().getCustomValue(“app.admin”);
List list = null;
if(user.getUserAccount().equals(appadmin)){
// 系统内置管理员默认获取全部授权
list = resourceservice.queryAllMenuCascade(parentpath);
}else{
list = resourceservice.queryUserMenuCascade(user.getId(), parentpath);
}
// 初始化根节点
Resource root= new Resource();
root.setId(parentid);

 Collections.sort(list, new Comparator<Object>() {public int compare(Object o1, Object o2) {Resource resource1 = (Resource) o1;Resource resource2 = (Resource) o2;if (resource1.getSort() > resource2.getSort()) {return 1;}if (resource1.getSort() < resource2.getSort()) {return -1;}//如果返回0则认为前者与后者相等return 0;}});// 组装Treereturn RecDHTree(root,list);
}

3.再看看前端接收到后端返回的数据是如何处理的

         $(".nav").accordion({//accordion: true,speed: 500,closedSign: '<img src="<%=path%>/images/menu_close.png"/>',openedSign: '<img src="<%=path%>/images/menu_open.png"/>'});}});
}

前后端如何进行数据交互相关推荐

Ruo-Yi前后端分离的数据过滤
Ruo-Yi前后端分离的数据过滤若依官网的介绍:http://doc.ruoyi.vip/ruoyi/document/htsc.html#%E6%95%B0%E6%8D%AE%E6%9D%83%E ...
前端和后端的JSON数据交互
因为之前一直在学后端方面的内容,对于前端这块的知识一直半懂半不懂.昨天学了ajax,一些知识点记录下. 前端知识最重要的两种请求方式:GET.POST. GET : 有请求参数,无请求体 POST ...
【对接】《前后端对接联调数据、调试接口过程乌龙大合集》
<团队合作大坑合集>_←你挚爱的强哥→的博客-CSDN博客1.百分号无限循环小数2.小数四舍五入计算错误3.写死了年份导致跨年无法选择最新年份4.悄悄修改内外网访问限制导致外网接口不能访问 ...
前端和后端怎么进行数据交互的_前端VS后端
前言对于广义上的前端来说,上游是接口, 下游是界面. 对于后端来说,上游是数据库, 下游是接口. 前端的工作的核心是交互,消费接口的数据,给到用户.我们分别来看这几个方面:前端能够抵达的最上游是接口 ...
SpringBoot+LayUI+MybatisPlus+Echarts图表前后端分离实现数据统计功能
前言: 小伙伴们,大家好,我是狂奔の蜗牛rz,当然你们可以叫我蜗牛君,我是一个学习Java快一年时间的小菜鸟,同时还有一个伟大的梦想,那就是有朝一日,成为一个优秀的Java架构师. 首先给各位粉丝朋友 ...
前后端分离 - 统一JSON 交互
1.应用场景主要用于前后端分离, 统一JSON 交互方式 2.学习/操作 1.文档阅读都前后端分离了,咱就别做页面跳转了!统统 JSON 交互__江南一点雨的博客-CSDN博客_前后端分离页面跳转 ...
python后端与前端数据交互_前端与后端的数据交互（jquery ajax+python flask）
前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据后端的数据接收与响应 1)接收 ...
C#前后端操作json数据
一.前端代码: function initDeptSelect() {var datas = {"plant":$('#plantSelect').val()}; //获取某个组件 ...
futurejava前台_web前端页面与后端Java的数据交互
java代码: package com.lpc.main; import java.io.IOException; import java.util.Set; import java.util.con ...

前后端如何进行数据交互

前后端如何进行数据交互相关推荐

最新文章

热门文章