SSM框架实现前后台交互-从零学习ssm框架（2）
前言
- 我的所有博客操作均有相应截图，所以只要跟着做，一定是能跑通的
这篇先从最简单的界面跳转到前后台交互以及后台的数据处理。
如果还没有配置好ssm框架，那就赏脸看看
https://blog.csdn.net/babybabyup/article/details/79687097 呗。
这一篇里面的文件路径均为配置篇所讲到的。
页面的简单跳转
在一个完整的网站系统中，页面与页面之间的跳转是最常见的也是至关重要的。在ssm框架中，站内的页面跳转会经过后台的某些处理，即controller包中的java文件会起到作用。
站内的页面跳转
新建test1.jsp
在views路径下，新建test1.jsp，其中的代码如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>TESTtitle>
head>
<body>
<b>This is test1.jsp!b>
body>
html>
在index.jsp添加链接
在index.jsp中添加代码
<a href="/test1" target="_blank">前往test1.jspa>
后台controller处理
在controller包中新建class为IndexController，并且注解为Controller,贴代码：
@Controller
public class IndexController {
@RequestMapping(value = "/test1")
public String tes1() {
return "test1";
}
}
前台传数据到后台
在一个网站中，用户难免要提交一些数据，这就涉及到了数据的前后台传递。在SSM框架中，数据可以通过两种方式传到后台即
- 通过url传值
- 通过表单传值
当然，我觉得在实际中表单传值用到的更多一些，下面具体讲一讲这两种方式的代码实现喽
- 通过url传值：index页面上把a=5传递到后台后然后跳转到test1页面并且把a的值显示出来。index页面的代码：
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Indextitle>
<script src="/js/jquery-3.2.1.min.js">script>
head>
<body>
这个是index页面<br>
<a href="/test1?a=5">将a=5传值到后台a>
body>
html>
在controller包中新建classIndexController,其中的代码为
package com.springmvc.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import java.net.URL;
@Controller
public class IndexController {
@RequestMapping(value = "/test1",method = RequestMethod.GET)
public String testController(@RequestParam int a,Model model) {
int pa = a;
model.addAttribute("a",pa);
return "test1";
}
}
test1页面的代码就是把传过来的a值显示出来。代码：
<%--
Created by IntelliJ IDEA.
User: hulimin
Date: 2017/10/28
Time: 21:31
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>TESTtitle>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js">script>
<script type="text/javascript" src="/js/ajaxfileupload.js">script>
head>
<body>
从index页面传过来的a=${a}
body>
html>
其中${} el语句，后边的文章会讲到的，现在知道怎么用就好了
各个页面截图如下：
index页面：
点击后到达test1页面 如下：
- 通过表单传值。在index页面输入表单内容，在test1页面显示出来
index页面新增一个表单代码
新增代码<br>
<form action="test2" method="post">
<table>
<tr>
<td>
姓名：
td>
<td>
<input type="text" name="username" placeholder="username">
td>
tr>
<tr>
<td>
学号：
td>
<td>
<input type="text" name="studentnumber" placeholder="studentnumber">
td>
tr>
<tr>
<td>
td>
<td>
<input type="submit" value="提交">
td>
tr>
table>
form>后台Indexcontroller 类中新增方法
//测试表单传值
@RequestMapping(value = "/test2",method = RequestMethod.POST)
public String test2Controller(@RequestParam String username,@RequestParam String studentnumber,Model model) {
String name = username;
String number = studentnumber;
model.addAttribute("name",name);
model.addAttribute("number",number);
return "test1";
}test1页面中新增
表单传值得到了：名字是${name},学号是${number}
通过el语句把传来的值显示出来
- 运行结果截图
index页面
test1 页面
有任何讲的不对的地方欢迎提出来哦