前后端数据交互方法和原理

对于想要搞web的新手而言，会用html+css+javascript实现一个页面没什么太大的困难，但是想要前后端实现数据交互，在没有指导的情况下，可能大多数人都会一头雾水，往往都会有以下的疑问。

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

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

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

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

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

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

一、通过表单传递参数

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

<form id="loginform" name="loginform" action="<%=path %>/login" method="post"><div class="form-group mg-t20"><i class="icon-user icon_font"></i><input type="text" class="login_input" id="sfzh" name="sfzh" placeholder="请输入用户名" /></div><div class="form-group mg-t20"><i class="icon-lock icon_font"></i><input type="password" class="login_input" id="pwd"  name="pwd" placeholder="请输入密码" /></div><div class="checkbox mg-b25"><label><!--  <input type="checkbox" />记住密码 --></label><span style="color: red;" id="error"><% String message = (String)request.getAttribute("message");if(StringUtils.isNotBlank(message)){ %><%=message %><%}%></span></div><button id="login" type="submit" style="submit" class="login_btn">登 录</button>
</form>

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是如何将前端数据传到后台的

function leftmenu(parentid, parentpath,moduleindex){var leftcontent="";$.ajax({type: "POST",url : "<%=path%>/resource/usermenus",data : {parentid:parentid,parentpath:parentpath},success : function(data){// 处理head menu是否有页面要打开leftcontent= template('_menu2tmpl',data);$('.nav').html(leftcontent);addclick();//临时点击显示菜单if($('.index-left-warp').width()==0){$(".index-left-show").hide();$(".index-left-warp").animate({width:"200px"},250);timer=setTimeout(function(){tabsResize();},500);};$(".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<Resource> 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.再看看前端接收到后端返回的数据是如何处理的

function leftmenu(parentid, parentpath,moduleindex){var leftcontent="";$.ajax({type: "POST",url : "<%=path%>/resource/usermenus",data : {parentid:parentid,parentpath:parentpath},success : function(data){// 处理head menu是否有页面要打开leftcontent= template('_menu2tmpl',data);$('.nav').html(leftcontent);addclick();//临时点击显示菜单if($('.index-left-warp').width()==0){$(".index-left-show").hide();$(".index-left-warp").animate({width:"200px"},250);timer=setTimeout(function(){tabsResize();},500);};$(".nav").accordion({//accordion: true,speed: 500,closedSign: '<img src="<%=path%>/images/menu_close.png"/>',openedSign: '<img src="<%=path%>/images/menu_open.png"/>'});}});}

前后端数据交互方法和原理相关推荐

ajax连接前后端原理,前后端数据交互方法和原理
前后端数据交互方法和原理发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...
前后端数据交互方法汇总
这篇文章给大家介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率.非常的详细,推荐给小伙伴们,有需要的小伙伴可以参考下. 1.HTML赋值输出到 Element 的 val ...
实现前后端数据交互方法汇总
此文章适合前后端协同开发经验不足的新手阅读. HTML赋值输出到 Element 的 value 或 data-name <input type="hidden" valu ...
软件测试的交互,软件测试--前后端数据交互
作为一个合格的软件测试人员, 能够熟练定位bug的位置是属于前端还是后端,是必备技能之一.所以就需要明白前后端数据是怎么进行交互的. 一.网站数据处理主要分为三层第一层,表示层,这部分可以用HTML ...
超详细总结：前后端数据交互原理
最近开始接触前后端的一些知识,查了很多资料,今天把互联网产品的前后端数据交互做个总结留做笔记. 互联网产品的前后端数据交互是通过一个通讯协议完成.前后台交互的协议主要包括HTTP,FTP,SMTP,T ...
前后端数据交互——ajax（原生及jquery）
目录前后端数据交互--ajax 1. 介绍 2.原生ajax用法 3.jquery的ajax 4.ajax原理说明前后端数据交互--ajax 1. 介绍 1.1 定义 Ajax(Asynchron ...
干货 | 万字长文全面解析GraphQL，携程微服务背景下的前后端数据交互方案
作者简介古映杰,携程研发高级经理,负责前端框架和基础设施的设计.研发与维护.开源项目react-lite和react-imvc作者. 前言随着多终端.多平台.多业务形态.多技术选型等各方面的发展, ...
前后端数据交互——ajax技术
在实际开发过程中,前端页面通常需要根据后台数据实现动态生成和实时更新,因此如何实现前后端数据交互成了开发过程中的难题. 现将使用ajax技术解决前后端数据的交互: (1)ajax技术介绍: ajax一 ...
前后端数据交互|分页查询|表格-双向绑定|get和post的区别
目录 1 前后端数据交互 1.1 前端代码部署在前端服务器 1.2 前端代码在浏览器展示(只展示页面,没有数据)----自给自足 1.3 前端/浏览器请求后端数据 (后端死数据)----给 ...

前后端数据交互方法和原理

前后端数据交互方法和原理相关推荐

最新文章

热门文章