SpringMVC前端和后端数据交互总结

本文主要介绍了SpringMVC前端和后端数据交互的资料,特地发出来记录一下。有需要的朋友可以了解一下。

控制器

作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转。SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面;其实就是servlet的替代品。

传值方式

springmvc最方便的一点就是可以通过注释方式来定义它的url。

@Controller
public class formMVC {
  @RequestMapping("/hello")
  public void login(){

  }

如上面这种方式,在项目名下跟着hello就能访问这个方法了,相较struts2的xml配置加大了开发效率,并且是以方法为级别的开发。

接收表单数据只需要在方法的参数加入响应的字段,对应表单input的name属性,因为是通过反射技术实现的所以字段要完全相同。  

  @RequestMapping("/login")
  public String login(String username,String password){
    System.out.println(username+" "+password);
    return "form.jsp";
  }

如上面这种方式,表单提交之后就会获得值。跳转方式就是使用返回的字符串,springmvc的DispatcherServlet会跳转到字符串的页面。你也可以配置它的前缀后缀。在它的配置文件中配置下面属性,就是在这个return的字符串的前面和后面加入你配置的前缀后缀。

  <!-- configure the InternalResourceViewResolver -->
  <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
      id="internalResourceViewResolver">
    <!-- 前缀 -->
    <property name="prefix" value="" />
    <!-- 后缀 -->
    <property name="suffix" value="" />
  </bean>

另外,springmvc可以使用bean来接收参数,因为是反射技术,所以属性字段依然要保持完全一样。

public class user {
  private String username;
  private String password;
  public String getUsername() {
    return username;
  }
  public void setUsername(String username) {
    this.username = username;
  }
  public String getPassword() {
    return password;
  }
  public void setPassword(String password) {
    this.password = password;
  }

}
@RequestMapping(value="/Model",method=RequestMethod.POST)
  public String loginModel(user u){
    System.out.println(u.getUsername()+" "+u.getPassword());
    return "form.jsp";
  }

最后,前端发过来的数据是经过json包装的,依然可以在后端使用bean来接收。

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<title>登录表单</title>
</head>
<script type="text/javascript">
  $(document).ready(function(){
    $("#button_submit").click(function(){
      //序列化表单元素,返回json数据
      var params = $("#userForm").serializeArray();
      console.log(params);
      //也可以把表单之外的元素按照name value的格式存进来
      //params.push({name:"hello",value:"man"});
      $.ajax({
        type:"post",
        url:"Model",
        data:params
      });
    });
  });
</script>
<body>
  <form id="userForm">
    <input name="username" type="text"/>
    <br/>
    <input name="password" type="password"/>
    <br/>
  </form>
    <button id="button_submit">提交</button>
    <button type="reset" >重置</button>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-03-06

详解vue与后端数据交互(ajax):vue-resource

本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. 必须引入一个库:vue-resource 1.获取普通文本数据 比如:a.txt: welcomet to vue!!! <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <sc

Vue2学习笔记之请求数据交互vue-resource

基本语法 必须引入一个库:vue-resource github地址 // 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // 在一个Vue实例内使用$http this.$http.get('/so

详解vue-Resource(与后端数据交互)

单来说,vue-resource就像jQuery里的$.ajax,用来和后端交互数据的.可以放在created或者ready里面运行来获取或者更新数据... vue-resource文档:https://github.com/vuejs/vue-resource/blob/master/docs/http.md 结合vue-router data(){ return{ toplist:[], alllist:[] } }, //vue-router route:{ data({to}){ //并

SpringMVC实现前端后台交互传递数据

本人对springmvc前端交互不太懂,搜索了很多关于springmvc前端交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. Controller.java代码: @Controller public class DataController { //一.接收和通过ModelMap传出参数,不需要视图解析器,测试时加了解析器,顾返回值不需后缀 //普通参数 @RequestMapping("/data1") public String data1(@Req

微信小程序 数据交互与渲染实例详解

微信小程序 数据交互与渲染 实现效果图: 微信小程序的api中提供了网络交互的api,我们只要调用即可和后端进行数据交互,该api为wx.request.,具体代码如下. //list.js //获取应用实例 var app = getApp() Page({ data: { list:[], hiddenLoading: true, url: '' }, loadList: function () { var that = this; that.setData({ hiddenLoading:

get post jsonp三种数据交互形式实例详解

一.get请求 1.引入 vue.js 和 vue-resource.js , 准备一个按钮 <input type="button" value="按钮" @click="get()"/> //点击按钮请求数据函数get() 2.准备一个txt文件 welcome vue 3.编写js代码 <script> window.onload=function(){ new Vue({ el:'body', //主体为body,

ajax方式实现注册功能(提交数据到后台数据库完成交互)

一.当我们在验证表单的时候,为了阻止把错误的也发送到服务器,我们通常这样设置: $(function(){ var isusername;(定一个变量) var ispwd; $('form').submit(function(e){ if(!isusername || !ispwd){ e.preventDefault();(阻止事件的默认事件) }) }); 1.在nodejs中我们可以用以下方法来(加载)跳转页面: JQuery 中的load()  这是实行加载一个页面  window.l

Android Activity 与Service进行数据交互详解

①从设计的角度来讲: Android的Activity的设计与Web页面非常类似,从页面的跳转通过连接,以及从页面的定位通过URL,从每个页面的独立封装等方面都可以看出来,它主要负责与用户进行交互. Service则是在后台运行,默默地为用户提供功能,进行调度和统筹.如果一棵树的地上部分是Activity的话,它庞大的根须就是Service.Android的服务组件没有运行在独立的进程或线程中,它和其他的组件一样也在应用的主线程中运行,如果服务组件执行比较耗时的操作就会导致主线程阻塞或者假死,从

Android Activity的跳转与传值详解

Android Activity的跳转与传值详解 Activity跳转与传值,主要是通过Intent类来连接多个Activity,以及传递数据. Intent是Android一个很重要的类.Intent直译是"意图",什么是意图呢?比如你想从这个Activity跳转到另外一个Activity,这就是一个意图.Intent类在Android系统中的作用很大,在此不详细说了,后面有文章介绍! Activity跳转,无返回结果 这是最简单的Activity跳转方式.从一个Activity启动

Android Activity启动模式之singleTop实例详解

本文实例讲述了Android Activity启动模式之singleTop.分享给大家供大家参考,具体如下: 在前面文章<Android Activity启动模式之standard实例详解>中,我们介绍了活动的默认启动模式standard,本文继续介绍Activity的singleTop模式. singleTop模式:当Activity的活动模式设置为singleTop时,在启动活动时首先检查栈顶活动是否是该活动,如果是,在使用当前实例,否则继续创建新的实例. (1)修改AndroidMani

Angular.js中$resource高大上的数据交互详解

本文主要给大家介绍的是关于Angular.js中$resource数据交互的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js 默认情况下,末尾斜杠(可以引起后端服务器不期望出现的行为)将从计算后的URL中剥离. 这个可以通过$resourceProvider配置: app.config(

Android Activity启动模式之standard实例详解

本文实例讲述了Android Activity启动模式之standard.分享给大家供大家参考,具体如下: Android的活动是通过任务Task来进行管理的,一个任务就是一组放在栈里的活动的集合,即所谓的返回栈(Back Stack).栈具有先进后出.后进先出的特性.当启动一个活动时,活动会在返回栈中入栈,处于栈顶位置,当按下返回键或者调用finish方法会销毁一个活动,此时栈顶活动会出栈,届时又会有新的活动处于栈顶位置. 在Android中,活动的启动模式有四种,根据不同的需求可以为活动设置

Android Activity启动模式之singleTask实例详解

本文实例分析了Android Activity启动模式之singleTask.分享给大家供大家参考,具体如下: 前面的文章介绍了Android 活动Activity的启动模式:standard 和singleTop .本文继续介绍Activity的下一个启动模式:singleTask. singleTask:当设置活动的启动模式为singleTask时,首先检查返回栈中是否存在当前活动,如果存在当前活动的实例,则直接使用当前实例,并把当前活动之上的所有活动pop出栈,即当前活动位于栈顶位置. 代

vuejs父子组件之间数据交互详解

父子组件之间的数据交互遵循: props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据 示例 子组件的点击事件函数中$emit自定义事件 export default { name: 'comment', props: ['issue','index'], data () { return { comment: '', } }, components: {}, methods: { removeComment: funct

android教程之service使用方法示例详解

Service的生命周期 (适用于2.1及以上) 1. 被startService的无论是否有任何活动绑定到该Service,都在后台运行.onCreate(若需要) -> onStart(int id, Bundle args).  多次startService,则onStart调用多次,但不会创建多个Service实例,只需要一次stop.该Service一直后台运行,直到stopService或者自己的stopSelf()或者资源不足由平台结束. 2. 被bindService的调用bin

android调用web service(cxf)实例应用详解

Google为ndroid平台开发Web Service提供了支持,提供了Ksoap2-android相关架包 1.下载该夹包可以直接登录http://code.google.com/p/ksoap2-android/,现在该站点已经提供了直接的下载,只要点击下载链接就可以下载了: 我现在的是ksoap2-android-assembly-2.6.5-jar-with-dependencies.jar 2.好了,现在我们就可以进行新建项目来进行测试了,首先我们先建立java服务端,这里的一些前期

vue.js前后端数据交互之提交数据操作详解

本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo