Java 获取 form 表单的数据

最新推荐文章于 2024-07-30 10:12:24 发布

鱼丸丶粗面

最新推荐文章于 2024-07-30 10:12:24 发布

阅读量3.4k

点赞数 2

分类专栏： Java 文章标签： ajax java

本文链接：https://blog.csdn.net/qq_34745941/article/details/104793536

版权

Java 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

文章目录

效果
方式1：form 表单提交
方式2：ajax 提交

效果

目录结构：

Spring Boot 项目
- LoginController 控制类：登陆后跳转至 login.html 页面。
- FormController 控制类：获取 login.html 页面传递的数据并打印。
以下仅实现方式不同，但效果和目录结构均一致。

在这里插入图片描述
login.html 页面输入：

FormController.java 控制台输出：

方式1：form 表单提交

LoginController：

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;


@Controller
@RequestMapping("/demo")
public class LoginController {

    @GetMapping("/login")
    public String login() {
        return "login";
    }
}

login.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Java 获取 Form 表单数据测试</title>
</head>
<body>
<form action="/user" method="post">
    用户名: <input type="text" name="userName"> <br>
    密  码: <input type="text" name="passWord"> <br>
    <input type="submit" value="登录">
</form>
</body>
</html>

FormController：

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class FormController {

    @PostMapping("/user")
    @ResponseBody
    public void form(String userName, String passWord){
        System.out.println("userName = " + userName);
        System.out.println("passWord = " + passWord);
    }

}

方式2：ajax 提交

LoginController：

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;


@Controller
@RequestMapping("/demo")
public class LoginController {

    @GetMapping("/login")
    public String login() {
        return "login";
    }

}

login.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>ajax 获取 Form 表单数据测试</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function login() {
            $.ajax({
                type: "POST", // 方法类型
                dataType: "json", // 预期服务器返回的数据类型(必须一致，否则进入 error: function ..)
                url: "/index/user", // 发送的 url
                data: $('#form').serialize(),
                success: function (result) {
                    console.log(result); // 打印服务端返回的数据(调试用)
                    alert("SUCCESS");
                },
                error: function () {
                    alert("FAIL");
                }
            });
        }
    </script>
</head>
<body>
<form id="form">
    用户名: <input type="text" name="userName"> <br>
    密 码: <input type="text" name="passWord"> <br>
    <input type="button" value="登录" onclick="login()">
</form>

</body>
</html>

FormController：

package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;

@Controller
@RequestMapping("/index")
public class FormController {

    @PostMapping("/user")
    @ResponseBody
    public HashMap<String, String> form(String userName, String passWord) {
        System.out.println("userName = " + userName);
        System.out.println("passWord = " + passWord);

        HashMap<String, String> hashMap = new HashMap<>();
        hashMap.put("result", "success");
        return hashMap;
    }

}