ajax提交表单，java后台验证表单

关于表单的默认行为：https://blog.csdn.net/whd526/article/details/78178451

需阻止表单的默认行为。

ajax中的content-type: https://www.jianshu.com/p/10cdbb35ac87

java springMVC表单验证：https://www.jianshu.com/p/f85c248294f6，https://blog.csdn.net/qq_27680317/article/details/79970590

1、表单如下

     说明：当form标签内的button没有设置type=button时，点击按钮表单会有默认行为，即提交给本页面的地址，故添加onclikc="return false"来阻止表单的默认行为，同时提交按钮onclick绑定的事件的函数名不能为sumbit（），否则会触发表单的默认行为，暂且猜测，button按钮上不要出现单独的submit字眼为好。

<form role="form" id="form" οnclick="return false">
    <label>姓名:</label><input type="text" name="username" id="username">
    <label>密码:</label><input type="text" name="password" >
    <label>选项</label>
    <select name="item">
       <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
    </select>
    <button type="button" οnclick="submit1()">提交</button>
</form>

 2、获取表单内容的函数

       说明：如果遇上表单内容比较多的情况，可使用下面的这个函数来解决表单内容获取的工作，如果是ajax的请求方式为GET，则ajax的data为 $.param( getFormParams ( ) )；如果是POST请求则为 JSON.Stringfy( getFormParams ( ) )；

function getFormParams(){
    var params = {};
    $("#form").find("input").each(function () {
        params[$(this).attr("name")] = $(this).val();
    });
    $("#form").find("select").each(function () {
        params[$(this).attr("name")] = $(this).val();
    });
    return params;
}

3、ajax提交表单

     

function submit1() {
    $.ajax({
        url: '/validFrom',
        type: 'GET',
        dataType: 'json',//预期的服务器响应的数据类型。
        data: jQuery.param(getFormParams()),
        //contentType: '', //发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
        //context: '',//为所有 AJAX 相关的回调函数规定 "this" 值。
        //processData: 'true',//布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
        //scriptCharset: '',//规定请求的字符集。
        //traditional:,//布尔值，规定是否使用参数序列化的传统样式。
        success: function (result, status, xhr) {
            alert(result.msg);
            console.log(result);
            console.log(status);//success
            console.log(xhr);
        },
        error: function (xhr, status, error) {
            alert(xhr.responseText);
            //console.log(status);//paraseeror
            //console.log(error);
        }
    });
}

 

4、后台Controller接收参数并验证

     说明：具体是在javaBean对象的属性上面添加相关注解，除了@NotEmpt还有@NotNULL等等，可以查阅

import javax.validation.constraints包下的验证注解

public class FormContent {

    @NotEmpty(message = "姓名不能为空！")
    private String username;

    @NotEmpty(message = "密码不能为空！")
    private String password;

    @NotEmpty(message = "item不能为空！")
    private String item;

    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 getItem() {
        return item;
    }

    public void setItem(String item) {
        this.item = item;
    }

    @Override
    public String toString() {
        return "FormContent{" +
                "username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", item='" + item + '\'' +
                '}';
    }
}

 

说明：Controller验证时，在接收参数的对象前面添加@Valid注解， 增加参数BindingResult bindingResult，具体使用方法如下

/**
 * 方法返回的值是json字符串或javaBEAN都没有关系，只要有注解@ResponseBody即可
 * @param formContent
 * @param bindingResult
 * @return
 */
@RequestMapping("/validFrom")
@ResponseBody
public String ValidForm(@Valid FormContent formContent, BindingResult bindingResult){

    System.out.println(formContent.toString());
    if(bindingResult.hasErrors()){
        System.out.println(bindingResult.getFieldError().getDefaultMessage());
        //return bindingResult.getFieldError().getDefaultMessage();
        RestResult restResult= new RestResult(0,bindingResult.getFieldError().getDefaultMessage());
        //return restResult;
        return JSON.toJSONString(restResult);
    }else{
        //return new RestResult(1,"请求成功！");
        RestResult restResult = new RestResult(1,"请求成功");
        return JSON.toJSONString(restResult);
    }

}