web后端和前端交互

网站数据处理主要分为三层。
第一层，表示层，这部分可以用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"/>'});}});}

java Web 前后端交互相关推荐

WEB前后端交互原型通用元件库、常用组件、信息输出、信息输入、信息反馈、综合系列、页面交互、首页、分类页、内容详情、用户中心、注册登录、找回密码、元件库、web元件库、rplib、axure
WEB前后端交互原型通用元件库.常用组件.信息输出.信息输入.信息反馈.综合系列.页面交互.首页.分类页.内容详情.用户中心.注册登录.找回密码.元件库.web元件库.rplib.axure原型 we ...
Java Web前后端交互方式
Java web前后端的交互方式 1. 利用cookie对象 Cookie是服务器保存在客户端中的一小段数据信息.使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置. ...
java jqgrid_jqgrid 前后端交互实例
原标题:jqgrid 前后端交互实例首先,jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信. 一.jqGrid特性基于j ...
Java Web前后端分离的思考与实践
第一节 Java Web开发方式的变化 Web开发虽然是我们常说的B/S模式,其实本质上也是一种特殊的C/S模式,只不过C和S的选择余地相对要窄了不少,而且更标准化.不论是采用什么浏览器和后端框架,W ...
Java Web前后端分离项目—后端servlet实例
关与作者更多博客请访问云里云外开源社区文章目录一.闲谈二.json字符串的接受和发送 json的发送 json的接收三.内网穿透或服务上云服务器四.跨域背景(为什么) 如何跨域五.对接出 ...
Python做web前后端交互
Python web开发入门 ------------------------------------------------------------------------------------- ...
Web前后端交互总结
序列化 ObjectMapper om = new ObjectMapper(); om.writerWithDefaultPrettyPrinter().writeValueAsString(use ...
java web前后台交互_前后端交互（javaweb）
前段后台交互的学习(Java web) 标签 : 前后端交互 Javaweb 下面介绍了一些关于交互的细节: 请求数据前端提供请求数据. 在开发中,后台在查询数据库时,需要借助查询条件才能查询到前端 ...
JAVA中的前后端交互
JDBC 什么是JDBC java数据库连接(Java Database Connectivity) 有什么用利用 Java 代码, 可以操作数据库. 怎么用注册驱动获取数据库连接创建 Sta ...

java Web 前后端交互

web后端和前端交互

java Web 前后端交互相关推荐

最新文章

热门文章