前后端交互

72 阅读 0 评论 48 点赞

我是靠谱客的博主可爱镜子，最近开发中收集的这篇文章主要介绍前后端交互，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

对于想要搞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;
}
});
// 组装Tree
return 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"/>'
});
}
});
}