SSM框架实现前后台交互-从零学习ssm框架（2）

最新推荐文章于 2024-09-16 12:07:29 发布

你敬爱的明明哥

最新推荐文章于 2024-09-16 12:07:29 发布

阅读量1.2w

点赞数 14

分类专栏： SSM框架后端文章标签： SSM框架后端技术前后端交互

本文链接：https://blog.csdn.net/babybabyup/article/details/79711028

版权

SSM框架同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

后端

5 篇文章 0 订阅

订阅专栏

前言

我的所有博客操作均有相应截图，所以只要跟着做，一定是能跑通的

这篇先从最简单的界面跳转到前后台交互以及后台的数据处理。
如果还没有配置好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>TEST</title>
</head>
<body>
<b>This is test1.jsp!</b>
</body>
</html>

在`index.jsp`添加链接

在index.jsp中添加代码


<a href="/test1" target="_blank">前往test1.jsp</a>

后台`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>Index</title>
    <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>TEST</title>
    <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>
                &nbsp;
            </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}<br>

通过el语句把传来的值显示出来

运行结果截图

index页面

test1 页面

有任何讲的不对的地方欢迎提出来哦

你敬爱的明明哥

关注

14
点赞
踩
65

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

SSM框架实现前后台交互-从零学习ssm框架（2）

前言

页面的简单跳转

站内的页面跳转

新建test1.jsp

在index.jsp添加链接

后台controller处理

前台传数据到后台

新建`test1.jsp`

在`index.jsp`添加链接

后台`controller`处理