SSM框架下实现form表单提交的方式

最新推荐文章于 2024-03-18 22:45:30 发布

Evan Wang

最新推荐文章于 2024-03-18 22:45:30 发布

阅读量1.2w

点赞数 10

分类专栏： Spring 文章标签： ssm表单提交表单提交 ajax实现表单提交提交表单 form表单提交

本文链接：https://blog.csdn.net/qq_41378597/article/details/85211932

版权

Spring 专栏收录该内容

22 篇文章 9 订阅

订阅专栏

实现form表单的提交有多种方式，这里我们主要讲两种常用的。

注：此Demo是在SSM框架下完成的，数据库采用MySQL，关于ssm整合的相关知识，这里不做过多赘述。主要展示表单提交方式，暂不考虑代码健壮性。

一、常见的form表单提交方式

分析：常见的表单提交方式，在表单中添加一个submit按钮，当点击按钮后，通过请求表单的action中的url，跳转到表现层从而完成对表单内容的提交。

弊端：当提交的数据量非常大时，所花费时间较长，我们需要等待页面响应完成后，才能进行其他操作。这样会影响用户体验。这样就可以使用ajax来完成form表单的提交。

二、使用ajax完成form表单提交

分析：使用ajax异步请求来进行表单提交，这样在等待表单提交的时间里，我们可以在页面中进行其他操作，这样会有更好的用户体验。

三、注意事项

在常用方式中，点击的登录按钮的type为"submit"类型；
在常用方式中，form的action不为空；
ajax方式中需要注意的是$.ajax方法中的参数：dataType和data。

因为主要是做后端的，所以平时前端写的较少，级别也就是入门级别，能看懂能改而已，所以很多时候需要百度和查看其他技术人员的博客。这次，我参考的代码在$.ajax方法中设置的dataType参数值为"html"而不是"json"，导致我在一开始调试的时候报错，最终是改成了"json"才成功，因此在这里特别说明并提醒一下，别和我一样走错了路，还有就是向服务端传输的data值了，像上面代码一样，将form表单中的数据序列化传输即可。

四、代码示例

jsp页面：testCommitForm.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户信息</title>
</head>
<body>

<%--常见的form表单提交方式--%>
<table>
    <h2 style="color: red">常见的表单提交方式：</h2><br>
    <form id="userInfo1" method="post" action="/addUserNormal">
        姓名:<input type="text" name="name"><br>
        年龄:<input type="text" name="age"><br>
        所在地:<input type="text" name="area"><br>
        结果：<h3>${msg}</h3><br>
        <input type="submit" value="提交">
    </form>
</table>
<br>
<br>
<br>

<%--使用jquery的ajax提交form表单--%>
<table>
    <h2 style="color: red">使用ajax实现表单提交：</h2><br>
    <form id="userInfo2" method="post">
        姓名:<input type="text" name="name"><br>
        年龄:<input type="text" name="age"><br>
        所在地:<input type="text" name="area"><br>
        结果：<h3 id="result"></h3><br>
        <input id="commit" type="button" value="提交">
    </form>
</table>

</body>
<script src="../js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        $("#commit").click(function () {
            $.ajax({
                url: "/addUserAjax",
                type: "post",
                //.serialize() 当提交多条表单数据时，我们可以采用当表单进行序列化的方式简化原有的操作
                data: $("#userInfo2").serialize(),
                dataType: "json",
                success: function (result) {
                    if (result == "success") {
                        $("#result").html("添加成功");
                    } else {
                        $("#result").html("添加失败");
                    }
                }
            })
        })
    })
</script>
</html>

controller层：UserController

package com.javawangming.controller;

import com.alibaba.fastjson.JSON;
import com.javawangming.bean.User;
import com.javawangming.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping("/addUserNormal")
    @ResponseBody
    public ModelAndView addUserNormal(User user){
        ModelAndView mv=new ModelAndView();
        try {
            userService.addUser(user);
            mv.setViewName("testCommitForm");
        } catch (Exception e) {
            e.printStackTrace();
            mv.addObject("msg", "添加失败");
        }
        mv.addObject("msg", "添加成功");
        return mv;
    }


    @RequestMapping("/addUserAjax")
    @ResponseBody
    public String addUserAjax(User user){
        try {
            userService.addUser(user);
        } catch (Exception e) {
            e.printStackTrace();
            return JSON.toJSONString("false");
        }
        return JSON.toJSONString("success");
    }
}

javabean:User

package com.javawangming.bean;

public class User {
    int id;
    String name;
    int age;
    String area;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getArea() {
        return area;
    }

    public void setArea(String area) {
        this.area = area;
    }
}

service层：UserService

package com.javawangming.service;

import com.javawangming.bean.User;

public interface UserService {
    void addUser(User user);
}

UserServiceImpl

package com.javawangming.service.impl;

import com.javawangming.bean.User;
import com.javawangming.dao.UserDao;
import com.javawangming.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserDao userDao;
    @Override
    public void addUser(User user) {
        userDao.addUserInfo(user);
    }
}

dao层：UserDao

package com.javawangming.dao;

import com.javawangming.bean.User;

public interface UserDao {
    void addUserInfo(User user);
}

UserDao.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.javawangming.dao.UserDao">
    <insert id="addUserInfo" parameterType="com.javawangming.bean.User">
        insert into user_info (name,age,area) values(#{name},#{age},#{area});
    </insert>
</mapper>

数据库表：user_info

CREATE TABLE `user_info` (
  `id` int(4) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) DEFAULT NULL,
  `age` int(3) DEFAULT NULL,
  `area` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

测试结果：

提交前：

提交后：

接下来，我们查看一下数据库，成功提交了表单数据。

有很多不足的地方欢迎大家指教。感谢阅读

Evan Wang

关注

10
点赞
踩
71

收藏

觉得还不错? 一键收藏
5
评论
SSM框架下实现form表单提交的方式

实现form表单的提交有多种方式，这里我们主要讲两种常用的。注：此Demo是在SSM框架下完成的，数据库采用MySQL，关于ssm整合的相关知识，这里不做过多赘述。主要展示表单提交方式，暂不考虑代码健壮性。一、常见的form表单提交方式分析：常见的表单提交方式，在表单中添加一个submit按钮，当点击按钮后，通过请求表单的action中的url，跳转到表现层从而完成对...
复制链接

扫一扫