springboot教程-将ajax请求中的参数封装到JavaBean中_spring boot把ajax提交的对象转位bean-CSDN博客

本文链接：https://blog.csdn.net/mayumin/article/details/114532118

这篇博客展示了如何使用HTML、JavaScript（jQuery）和Ajax实现从表单提交学生信息到Java后端控制器。在HTML中创建了一个学生信息输入表单，包括姓名、性别、生日、手机号和寝室号字段。JavaScript的doSubmit()函数负责获取表单数据并使用Ajax进行POST请求，将数据以JSON格式发送到'/save'接口。Java后端接收到数据后，打印出接收到的学生对象，并返回一个包含状态码和消息的JsonResult。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

适合注册、添加页面，提交的参数较多，如下图添加学生：

在这里插入图片描述

html

创建 save_student.html ，内容如下

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
姓名：<input id="name"><br>
性别：<input name="sex" value="0" type="radio">女 &nbsp;&nbsp;
<input name="sex" value="1" type="radio">男<br>
生日：<input id="birthday" ><br>
手机号：<input id="phone" ><br>
寝室号：<input id="address" ><br>
<input type="button" value="提交" onclick="doSubmit()">

<script>
    function doSubmit() {
        var name=$("#name").val();
        var sex=$("input:radio[name='sex']:checked").val();
        var birthday=$("#birthday").val();
        var phone=$("#phone").val();
        var address=$("#address").val();

        $.ajax({
            url:'/save',
            type:'post', //使用post方法
            dataType:'json',//服务器端返回的数据格式是json
            data: {
                "name":name,
                "sex":sex,
                "sex":sex,
                "birthday":birthday,
                "phone":phone,
                "address":address,
            },//发给服务器端的数据
            success:function(data){   //data:服务器端返回给浏览器端的数据
                if(data.code==0){
                    alert(data.msg);
                    // location.href='index.html';
                }else{
                    alert(data.msg)
                }
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest);
                alert(textStatus);
                alert(errorThrown);
            }
        });
    }

</script>

javabean

public class Student {

    private String name;
    private Integer sex;
    private String birthday;
    private String phone;
    private String address;

    public String getName() {
        return name;
    }

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

    public Integer getSex() {
        return sex;
    }

    public void setSex(Integer sex) {
        this.sex = sex;
    }

    public String getBirthday() {
        return birthday;
    }

    public void setBirthday(String birthday) {
        this.birthday = birthday;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    @Override
    public String toString() {
        return "Student{" +
                "name='" + name + '\'' +
                ", sex=" + sex +
                ", birthday='" + birthday + '\'' +
                ", phone='" + phone + '\'' +
                ", address='" + address + '\'' +
                '}';
    }
}

Controller代码：

@RestController
public class StudentCtrl {
    @RequestMapping("/save")
    public JsonResult save(Student student){
        System.out.println(student);
        return new JsonResult(0,"保存成功！");
    }
}