关于表单的默认行为: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); } }