介绍

适合注册、添加页面，提交的参数较多

传数组，可以将 , 分割的字符串，传入到 bean 中数组类型的成员变量中

如下图注册：

html

创建 reg.html ，内容如下

js部分：

<script src="js/jquery-1.11.0.min.js" ></script>

<script>

function reg(){
    //前端校验
    var username=$("#username").val()
    var password=$("#password").val()
    var password2=$("#password2").val()


    if(username===''){
        //console.log("用户名不能为空！")
        $("#msg").html("用户名不能为空！")
        $("#username").focus()
        return;
    }
    if(password===''){
        $("#msg").html("密码不能为空！")
        $("#password").focus()
        return;
    }
    console.log("password2:",password2)
    console.log("password2===''：：：",password2==='')
    if(password2===''){
        $("#msg").html("确认密码不能为空！")
        $("#password2").focus()
        return;
    }
    if(password != password2){
        $("#msg").html("密码和确认密码必须一致，重新填写！")
        $("#password").focus()
        return;
    }

    $("#msg").html("") // 需要传入 ""，表示空值

    var sex=$("input:radio[name='sex']:checked").val()

    var phone=$("#phone").val()

    console.log( "phone：", phone)
    console.log( "性别：", sex)

    var likeArray =[];// 定义数组
    $('input[name="likes"]:checked').each(function(){
        likeArray.push($(this).val());//将选中的值，放入到数组中
    });
    //将数组拼装成由 “,” 分割的字符串※※※※关键，否则提交报错
    var likes = likeArray.join(",")
    console.log(like)

    var jiguan=$("#jiguan").val()
    console.log("籍贯：",jiguan)

    var jieshao=$("#jieshao").val()
    console.log("介绍：",jieshao)


    $.ajax({
        url:'reg',
        type:'post', //请求方式，GET或POST
        data:{ //要提交给服务器的数据
            username : username,
            "password" : password,
            "password2" : password2,
            sex:sex,
            phone:phone,
            likes:likes, // 传入 bean 中的 数组类型的 成员变量
            jiguan:jiguan,
            jieshao:jieshao
        },
        dataType:'json',//服务器返回数据的类型
        success:function(data){//成功时执行该函数，data就是服务器返回的数据
            console.log("服务器返回的数据是：",data)
            //判断，登录成功后，跳转到首页 index.html
            if(data.code==0){
                //跳转到 index.html 页面
                location.href="login.html";
            }else{
                //登录失败
                $("#msg").html(data.msg)//向id是msg的标签，显示文字
            }
        },
        error:function(xhr,textStatus){//错误时执行该函数
            console.log('错误')
            console.log(xhr)
            console.log(textStatus)
        }
    })

}

</script>

html部分：

<h1>注册</h1>

    用户名：<input type="text" name="username" id="username"> <span style="color:red;">*</span> <br/>
    密码：<input type="text" name="password" id="password"> <span style="color:red;">*</span><br/>
    确认密码：<input type="text" name="password2" id="password2"> <span style="color:red;">*</span><br/>

    性别：<input type="radio" name="sex" checked value="0"> 女       
        <input type="radio" name="sex" value="1"> 男 <br/>

    手机号：<input type="text" name="phone" id="phone"><br/>

    爱好：<input type="checkbox" name="likes" value="wzry">王者荣耀    
        <input type="checkbox" name="likes" value="cj">吃鸡   
        <input type="checkbox" name="likes" checked value="dy">刷抖音<br/>

    籍贯：<select name="jiguan" id="jiguan">
            <option>请选择籍贯</option>
            <option value="beijing">北京</option>
            <option value="jilin">吉林省</option>
        </select>    <br/>
    自我介绍：<input name="jieshao" id="jieshao"> <br/>


    <input type="submit" value="注册" onclick="reg()">
    <div id="msg" style="color:red;"></div>

java 代码

bean

package com.stdspringboot.vo;

public class UserVO {

    private String uid;
    private String username;
    private String password;
    private int sex;
    private String jiguan;
    private String phone;
    // private List<String> likes = null; // 用list也可以，要加setter和getter方法
    private String[] likes;
    private String jieshao;
    private String createTime;
    private String modifyTime;
    private String realName;

    public String[] getLikes() {
        return likes;
    }

    public void setLikes(String[] likes) {
        this.likes = likes;
    }

    public int getSex() {
        return sex;
    }

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

    public String getUid() {
        return uid;
    }

    public void setUid(String uid) {
        this.uid = uid;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getJiguan() {
        return jiguan;
    }

    public void setJiguan(String jiguan) {
        this.jiguan = jiguan;
    }

    public String getPhone() {
        return phone;
    }

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

    public String getJieshao() {
        return jieshao;
    }

    public void setJieshao(String jieshao) {
        this.jieshao = jieshao;
    }

    public String getCreateTime() {
        return createTime;
    }

    public void setCreateTime(String createTime) {
        this.createTime = createTime;
    }

    public String getModifyTime() {
        return modifyTime;
    }

    public void setModifyTime(String modifyTime) {
        this.modifyTime = modifyTime;
    }

    public String getRealName() {
        return realName;
    }

    public void setRealName(String realName) {
        this.realName = realName;
    }
}

Controller

package com.stdspringboot.ctrl;

import com.stdspringboot.vo.JsonResult;
import com.stdspringboot.vo.UserVO;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class RegCtrl {

    @RequestMapping("/reg")
    public JsonResult reg(UserVO user){

        return new JsonResult(0,"保存成功！");
    }
}

原文出处：/show_1IXiq7ovDCU.html