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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/babybabyup/article/details/79711028

前言

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

这篇先从最简单的界面跳转到前后台交互以及后台的数据处理。
如果还没有配置好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 页面

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

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试