关键词:
一、从前端向后端传送数据
常见的3种方式
1、form表单的action:此方法可以提交form表单内的输入数据,也可同时提交某些隐藏但设置有默认值的<input>,如修改问题时,我们除了提交问题的相关信息,还需要将用户的编号提交给后端,此时就可以设置一个默认值为用户编号的<input>,并将其隐藏
2、<a>
1 <a href="<%=path%>/Question/DisplayQuestionInfo?question_id=$question.question_id">$question.question_title</a>
比如该处代码,显示了问题的标题信息,并将其作为超链接,点击该链接时进入后端Controller类的方法,并向其发送问题编号question_id
3、ajax请求:此方法一般在不需要页面跳转时采用,可以局部刷新页面,比如向后端提交关注某用户的信息,后端收到ajax的请求数据,对数据库进行操作,并通过@Response注解返回信息给前端,然后前端进行相关操作,可以不进行页面跳转
1 <script language="JavaScript"> 2 ...... 3 function SaveUserFollowUser() 4 var login_user_id = $login_user_id //登录者(发起者)编号 5 var user_id = $user.user_id; //接受者用户编号 6 7 $.ajax( 8 url:"<%=path%>/UserRelation/SaveUserFollowUser", 9 type:"POST", 10 async: false, 11 contentType:"application/json;charset=UTF-8", 12 dataType:‘json‘, 13 14 data:JSON.stringify("from_user_id":login_user_id,"to_user_id":user_id), //JSON对象转为字符串 15 success:function(data) 16 /* 可在后端增加判断发起者和接受者用户是否是同一用户的判断 */ 17 if (data == true) 18 alert("关注成功"); 19 else 20 alert("您已经关注该用户,不可重复关注") 21 22 23 ); 24 25 </script> 26 27 ...... 28 <button class="btn btn-success" style="width: 100px" onclick="SaveUserFollowUser()">关注用户</button> 29 ......
后端Controller类
1 /** 2 * 表现层 用户关系相关 (关注用户、被用户关注、关注问题、赞同回答) 3 */ 4 @Controller 5 @RequestMapping("/UserRelation") 6 public class UserRelationController 7 8 ...... 9 10 /** 11 * 新增某用户关注某用户 12 * @param map 13 * @return 14 */ 15 @RequestMapping(value = "/SaveUserFollowUser",method = RequestMethod.POST) 16 public @ResponseBody Boolean SaveUserFollowUser(@RequestBody Map<String,String> map) 17 18 //关注发出者编号 19 Integer from_user_id = Integer.parseInt(map.get("from_user_id")); 20 //关注接受者编号 21 Integer to_user_id = Integer.parseInt(map.get("to_user_id")); 22 //是否新增成功 23 //该项可以增加发起者用户和接受者用户是否是同一用户的判断,即比较from_user_id与to_user_id是否相等,如果相等则关注失败 24 //通过返回Integer类型而非Boolean类型的做判断 本程序并未增加这项判断 25 Boolean flag = userRelationService.saveUserFollowUser(from_user_id,to_user_id); 26 return flag; 27 28 29 ...... 30 31
二、从后端向前端传送数据
1、Model
1 /** 2 * 表现层 用户 3 */ 4 @Controller 5 @RequestMapping(value = "/User") 6 public class UserController 7 8 ...... 9 10 /** 11 * 进入个人信息页面 12 * @param httpSession 13 * @param model 14 * @return 15 */ 16 @RequestMapping(value = "/DisplayMyInfo") 17 public String DisplayMyInfo(HttpSession httpSession, Model model) 18 Integer user_id = (Integer) httpSession.getAttribute("login_user_id"); //登录者个人编号 19 User user = userService.findUserById(user_id); //登录者个人信息 20 21 model.addAttribute("user",user); //将登录者个人信息返回给前端 22 return "User/myInfo"; 23 24 25 ...... 26 27
前端部分代码
1 ...... 2 <div class="col-md-6 col-md-offset-5" style="text-align: left;"> 3 <h2>用户名:$user.user_name</h2> 4 <h2>用户昵称:$user.user_nickname</h2> 5 <h2>用户性别:$user.user_sex</h2> 6 <h2>用户邮箱:$user.user_email</h2> 7 <h2>用户密码:$user.user_password</h2> 8 </div> 9 ......
此时可以通过$直接取得后端传来的数据
该方法与Model相比,多增加了返回的视图(View),对于返回给前端的具体数据处理类似
ssm(spring+springmvc+mybatis)发起ajax请求前后端交互数据问题与解决方案(代码片段)
1.ajax发起无参的ajax请求返回任意类型的数据通常这种请求最为简单,不会报错,如下:jsp界面controller运行结果能在浏览器控制台正常返回结果。2.ajax发起有参的ajax请求返回任意类型的数据jsp界面controller运行结果后... 查看详情
ssm框架用json进行前后端数据传输
一个根据用户id查找用户信息的简单功能,使用JSON进行数据的传输前端代码这里用bootstrap做简单的样式美化,中间留了个div用来异步的显示查询结果,ajax进行前端的数据传输(class内容可以无视,只有美化效果):<formclass=... 查看详情
前后端分离ssm配置跨域(代码片段)
前后端分离开发需要跨域,之前只会pringboot跨域,只需要一个配置类即可,下面记录一下ssm的配置三个文件需要添加配置SimpleCORSFilter.java实现FilterpublicclassSimpleCORSFilterimplementsFilterprivatebooleanisCross=false;@Overridepublicvoiddestroy()isCross=f 查看详情
前后端分离vue+ssm项目整合(代码片段)
1.前端项目打包前端项目需要打包放到ssm框架里的web目录下,更新Tomcat打包原理webpack与其他的打包模块不同的是,webpack是把项目当作一个整体,通过一个给定的的主文件,webpack将从这个文件开始找到你的项目的... 查看详情
ajax前后端交互利器详解(代码片段)
✍Ajax前后端交互利器🔥Ajax前后端交互利器地址🔥Ajax前后端交互利器详解(一)https://blog.csdn.net/Augenstern_QXL/article/details/120116296🔥Ajax前后端交互利器详解(二)https://blog.csdn.net/Augenstern_QXL/article/details/1 查看详情
ajax前后端交互利器详解(代码片段)
✍Ajax前后端交互利器🔥Ajax前后端交互利器地址🔥Ajax前后端交互利器详解(一)https://blog.csdn.net/Augenstern_QXL/article/details/120116296🔥Ajax前后端交互利器详解(二)https://blog.csdn.net/Augenstern_QXL/article/details/1 查看详情
在ssm框架中前后台数据交互均使用json格式
前后台数据交互均使用json。框架ssm(spring+springmvc+mybatis) @RequestBody注解实现接收http请求的json数据,将json数据转换为java对象,注解加载方法参数前 @ResponseBody注解用于将Controller的方法返回的对象,通过HttpMessageConver... 查看详情
初识vue——最简单的前后端交互示例(代码片段)
...(读音/vju?/,类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。”但是这个概念是个什么鬼?还是让人一头雾水嘛。而且我一开始也没有搞清楚vue的定位,只知道它... 查看详情
前后端交互(代码片段)
前端传JSON 此JSON有上下级关系每一个有孩子节点此节点有数据"standardspeciallistid":"10339","standardcostid":"0","costcode":"(A)","costcodelevel":"1","costcodename":"开发成本","costcodeparentid":"0","haschild":"","budgetvaria 查看详情
ssm(spring+springmvc+mybatis)发起ajax请求前后端数据交互问题与解决方案(代码片段)
1.发起无参ajax请求这是最简单的ajax请求,如下:<%@pagecontentType="text/html;charset=UTF-8"language="java"%><html><head><title>Title</title><scripttype="text/javascript"src="js/jquery-2.0.... 查看详情
ssm(spring+springmvc+mybatis)发起ajax请求前后端数据交互问题与解决方案(代码片段)
1.发起无参ajax请求这是最简单的ajax请求,如下:<%@pagecontentType="text/html;charset=UTF-8"language="java"%><html><head><title>Title</title><scripttype="text/javascript"src="js/jquery-2.0.... 查看详情
前后端交互注意事项(代码片段)
·GET方法获取用户列表接口中,若请求成功但得到的用户列表为空,后端也应返回为200,eg:returnnewResponse<>("暂无用户信息",Response.SUCCESS_CODE,userList); //尽管此时的userList为空数组 ·查询日志列表或其他信... 查看详情
前后端分离ssm配置swagger接口文档(代码片段)
之前配置过springboot,相比ssm要简单很多,现在记录一下ssm的配置在pom.xml中加入依赖<!--swagger本身不支持springmvc的,springfox把swagger包装了一下,让他可以支持springmvc--><dependency><groupId>io.springfox</groupId><artifactI 查看详情
flask框架:如何运用ajax轮询动态绘图(代码片段)
...ript和XML可用于前后端交互。本文分享自华为云社区《Flask框架:运用Ajax轮询动态绘图》,作者:LyShark。Ajax是异步JavaScript和XML可用于前后端交互,在之前《Flask框架:运用Ajax实现数据交互》简单实现了前后端... 查看详情
项目实战仓库信息管理系统(layui+ssm+springboot)(代码片段)
...展示二、设计思路1.SSM项目(单体架构)示意图2.前后端交互示意图3.仓库管理系统架构图4.响应格式5.异常处理机制6.日志记录机制7.鉴权服务设计与实现8.业务功能简述三、数据库设计1.数据库模型设计概览2.数据库表设计... 查看详情
开源商城项目mallservice-ssm(springspringmvcmybatismysql)前后端分离(代码片段)
MallServiceAPI文档Github地址github开源仓库返回JSON规范操作成功时:"result":true,//...其它信息...操作失败时:"result":false,"message":"(错误消息)"请求参数约定给出参数则使用application/x-www-form-urlen... 查看详情
前后端交互模式(代码片段)
一、原生Ajax1.1ajax概述Ajax即“AsynchronousJavascriptAndXML”(异步JavaScript和XML),是一种用于客户端与服务端进行数据交互的一种技术。Ajax能够创建交互式、快速动态网页应用,无需重新加载整个网页的情况下,能够更新部分网页。... 查看详情
axios前后端交互工具学习(代码片段)
文章目录Axios前后端交互工具学习引言引入Axios介绍GET请求的方式then方法catch方法POST请求的方式PUT请求的方式Axios的基本配置Axios的拦截器Vue怎么和Axios配合呢?Axios前后端交互工具学习引言 Axios是一个异步请求技术,... 查看详情