表单数据快速生成JSON

最新推荐文章于 2024-07-24 22:46:43 发布

Eiffel_Wu

最新推荐文章于 2024-07-24 22:46:43 发布

阅读量2.1k

点赞数 1

分类专栏：项目模块文章标签：表单数据快速生成json

本文链接：https://blog.csdn.net/Eiffel_Wu/article/details/100403565

版权

项目模块专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表单数据快速生成JSON

适用场景：向后台提交数据时，表单字段非常多，用于简化操作

一、实体类

1、pom.xml引入依赖

<!--引入lombok-->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.12.6</version>
    <scope>provided</scope>
</dependency>

2、实体类代码

package com.java.pojo;

import lombok.Data;

/**
 * @author Liushun
 * @date Created in 2018/6/2 19:21
 * @description User实体类
 */

// 简化JavaBean的代码，比如：getter/setter/equals/hashcod/toString等方法，依赖lombok.jar包
@Data
public class User {
    // 用户名
    private String username;

    // 密码
    private String pwd;

    // 手机号
    private String phone;

    // 邮箱
    private String email;
}

二、表单数据

1、uerRegister.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() +request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath %>">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户注册</title>
    <%--引入jquery--%>
    <script src="<%=basePath %>/static/js/jquery-1.8.2.min.js"></script>
    <%--引入自定义的js--%>
    <script src="<%=basePath %>/static/js/jsonHandler.js"></script>
</head>
<body>
    <center>
        <form action="javascript:void(0)" id="fm1">
            <table>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="text" name="pwd"></td>
                </tr>
                <tr>
                    <td>手机</td>
                    <td><input type="text" name="phone"></td>
                </tr>
                <tr>
                    <td>邮箱</td>
                    <td><input type="text" name="email"></td>
                </tr>
                <tr>
                    <td><input type="submit" value="注册" id="register"></td>
                    <td><input type="reset" value="重置"></td>
                </tr>
            </table>
        </form>
    </center>
</body>
    <script type="text/javascript">
        $(function(){
            $("#register").click(function(){
                var json = $("#fm1").serializeObject();	// json对象
                var jsonStr = JSON.stringify(json); // json对象转换成json字符串
                console.log(jsonStr);
                $.ajax({
                    url:"<%=basePath %>/index/userRegister",
                    type:"POST",
                    dataType:"JSON",
                    data:jsonStr,
                    contentType:"application/json",
                    success:function(rs){
                        console.log(rs);
                    },
                    error:function(rs){
                        alert("ajax发生错误了");
                    }
                });
            });
        });
    </script>
</html>

2、自定义的jsonHandler.js

$.fn.serializeObject = function()    
{    
   var o = {};    
   var a = this.serializeArray();    
   $.each(a, function() {    
	   if (o[this.name]) {    
		   if (!o[this.name].push) {    
			   o[this.name] = [o[this.name]];    
		   }    
		   o[this.name].push(this.value || '');    
	   } else {    
		   o[this.name] = this.value || '';    
	   }    
   });    
   return o;    
};

三、controller层

package com.java.controller;

import com.java.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * @author Liushun
 * @date Created in 2018/6/1 21:04
 * @description
 */
@Controller
@RequestMapping("/index")
public class IndexController {

    /**
     * 通过插件将表单属性和值快速变成json数据，通过ajax传递过来
     * @param user
     */
    @RequestMapping("/userRegister")
    public @ResponseBody boolean userRegister(@RequestBody User user){
        System.out.println("user = " + user);
        return true;
    };
}