SpringBoot使用ajax快速将form表单提交给后台

最新推荐文章于 2024-04-16 10:01:04 发布

weixin_45599294

最新推荐文章于 2024-04-16 10:01:04 发布

阅读量3.2k

点赞数 4

文章标签： SpringBoot前后台交互 SpringBoot使用ajax快速将form表单交给后台 ajax SpringBoot 表单提交后台

本文链接：https://blog.csdn.net/weixin_45599294/article/details/102473257

版权

方式一

使用jquery的serializeArray方法，和springBoot的自动参数绑定
html

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        function subm() {
            //将form中的键值对转换为集合对象
            var serializeArray = $("#for").serializeArray();
            $.ajax({
                url: "/user/login1",
                type: "post",
                data: serializeArray,
                success: function (data) {
                    alert(data)
                }
            })
        }

    </script>
</head>
<body>
<form id="for">
    用户名：<input type="text" name="name">
    密码:<input type="text" name="password">
</form>
<button onclick="subm()">登录</button>
</body>
</html>

controller

@Controller
@RequestMapping("/user")
public class UserServlet {
    @RequestMapping("/login1")
    public ResponseEntity<String> login1(User user) {
        System.out.println("接收到数据" + user);
        return new ResponseEntity<String>("成功", HttpStatus.OK);
    }
}

damain

package com.czxy.domain;

import javax.persistence.Column;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

@Table(name = "`user`")
public class User {
    @Id
    @Column(name = "id")
    @GeneratedValue(generator = "JDBC")
    private Integer id;

    @Column(name = "`name`")
    private String name;

    @Column(name = "`password`")
    private String password;

    /**
     * @return id
     */
    public Integer getId() {
        return id;
    }

    /**
     * @param id
     */
    public void setId(Integer id) {
        this.id = id;
    }

    /**
     * @return name
     */
    public String getName() {
        return name;
    }

    /**
     * @param name
     */
    public void setName(String name) {
        this.name = name;
    }

    /**
     * @return password
     */
    public String getPassword() {
        return password;
    }

    /**
     * @param password
     */
    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        StringBuilder sb = new StringBuilder();
        sb.append(getClass().getSimpleName());
        sb.append(" [");
        sb.append("Hash = ").append(hashCode());
        sb.append(", id=").append(id);
        sb.append(", name=").append(name);
        sb.append(", password=").append(password);
        sb.append("]");
        return sb.toString();
    }
}

方式二

传递json格式数据，后台接收
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        function subm() {
            //自定义方法，将form中的数转转换为json格式（不是标准的）
            $.fn.serializeJson = function () {
                var serializeObj = {};
                var array = this.serializeArray();
                var str = this.serialize();
                $(array).each(function () {
                    if (serializeObj[this.name]) {
                        if ($.isArray(serializeObj[this.name])) {
                            serializeObj[this.name].push(this.value);
                        } else {
                            serializeObj[this.name] = [serializeObj[this.name], this.value];
                        }
                    } else {
                        serializeObj[this.name] = this.value;
                    }
                });
                return serializeObj;
            };
            var fjson = $("#for").serializeJson();

            $.ajax({
                url: "/user/login2",
                type: "post",
                //转换为标准格式的json
                data: JSON.stringify(fjson),
                //声明以json格式发送
                contentType: "application/json;charset=UTF-8",
                success: function (data) {
                    alert(data)
                }
            })
        }
    </script>
</head>
<body>
<form id="for">
    用户名：<input type="text" name="name">
    密码:<input type="text" name="password">
    <button type="button" onclick="subm()">登录</button>
</form>
</body>
</html>

controller

package com.czxy.controller;


import com.czxy.domain.User;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;


@Controller
@RequestMapping("/user")
public class UserServlet {

    @RequestMapping("/login2")
    public ResponseEntity<String> login2(@RequestBody User user) {
        System.out.println("接收到数据" + user);
        return new ResponseEntity<String>("成功", HttpStatus.OK);
    }
    
}

domain

package com.czxy.domain;

import javax.persistence.Column;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

@Table(name = "`user`")
public class User {
    @Id
    @Column(name = "id")
    @GeneratedValue(generator = "JDBC")
    private Integer id;

    @Column(name = "`name`")
    private String name;

    @Column(name = "`password`")
    private String password;

    /**
     * @return id
     */
    public Integer getId() {
        return id;
    }

    /**
     * @param id
     */
    public void setId(Integer id) {
        this.id = id;
    }

    /**
     * @return name
     */
    public String getName() {
        return name;
    }

    /**
     * @param name
     */
    public void setName(String name) {
        this.name = name;
    }

    /**
     * @return password
     */
    public String getPassword() {
        return password;
    }

    /**
     * @param password
     */
    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        StringBuilder sb = new StringBuilder();
        sb.append(getClass().getSimpleName());
        sb.append(" [");
        sb.append("Hash = ").append(hashCode());
        sb.append(", id=").append(id);
        sb.append(", name=").append(name);
        sb.append(", password=").append(password);
        sb.append("]");
        return sb.toString();
    }
}

方式三

使用jquery的formdata方式获取form内容
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        function subm() {
            var formData = new FormData($("#for")[0]);
            alert(formData)
            console.log(formData)
            $.ajax({
                url: "/user/login3",
                type: "post",
                //不使用缓存
                cache: false,
                //发送不想转换的的信息
                processData: false,
                contentType: false,
                data: formData,
                success: function (data) {
                    alert(data)
                }
            })
        }
    </script>
</head>
<body>
<form id="for">
    用户名：<input type="text" name="name">
    密码:<input type="text" name="password">
    <button type="button" onclick="subm()">登录</button>
</form>
</body>
</html>

controller

package com.czxy.controller;


import com.czxy.domain.User;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;


@Controller
@RequestMapping("/user")
public class UserServlet {
    @RequestMapping("/login1")
    public ResponseEntity<String> login1(User user) {
        System.out.println("接收到数据" + user);
        return new ResponseEntity<String>("成功", HttpStatus.OK);
    }

    @RequestMapping("/login2")
    public ResponseEntity<String> login2(@RequestBody User user) {
        System.out.println("接收到数据" + user);
        return new ResponseEntity<String>("成功", HttpStatus.OK);
    }

    @RequestMapping("/login3")
    public ResponseEntity<String> login3(User user) {
        System.out.println("接收到数据" + user);
        return new ResponseEntity<String>("成功", HttpStatus.OK);
    }
}

domain

package com.czxy.domain;

import javax.persistence.Column;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

@Table(name = "`user`")
public class User {
    @Id
    @Column(name = "id")
    @GeneratedValue(generator = "JDBC")
    private Integer id;

    @Column(name = "`name`")
    private String name;

    @Column(name = "`password`")
    private String password;

    /**
     * @return id
     */
    public Integer getId() {
        return id;
    }

    /**
     * @param id
     */
    public void setId(Integer id) {
        this.id = id;
    }

    /**
     * @return name
     */
    public String getName() {
        return name;
    }

    /**
     * @param name
     */
    public void setName(String name) {
        this.name = name;
    }

    /**
     * @return password
     */
    public String getPassword() {
        return password;
    }

    /**
     * @param password
     */
    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        StringBuilder sb = new StringBuilder();
        sb.append(getClass().getSimpleName());
        sb.append(" [");
        sb.append("Hash = ").append(hashCode());
        sb.append(", id=").append(id);
        sb.append(", name=").append(name);
        sb.append(", password=").append(password);
        sb.append("]");
        return sb.toString();
    }
}