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

实现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

 

测试结果:

 

提交前:

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

 

 

提交后:

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

 

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

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

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

    原文作者:Evan Wang
    原文地址: https://blog.csdn.net/qq_41378597/article/details/85211932
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞