使用Ajax傳遞和接收資料,實現註冊和註冊成功後跳轉
阿新 • • 發佈:2018-12-10
返回狀態資訊實體類省略get和set
private String stauts;
private String msg;
控制器
@RequestMapping(value = "register", method = RequestMethod.POST, consumes = "application/json",produces = "application/json") @ResponseBody public ResponseResult register(@RequestBody RegisterInfo registerInfo) { System.out.println(registerInfo.getName()); ResponseResult result = null; if (service.register(registerInfo)){ result = new ResponseResult("sucess","註冊成功"); }else { result = new ResponseResult("error","註冊失敗"); }; return result; }
js程式碼中$.fn.serializeObject序列化物件,location.href實現跳轉,
<script> function register() { var jsonInfo = $('#myform').serializeObject(); var jsonString = JSON.stringify(jsonInfo); console.log(jsonString); $.ajax({ type:'POST', data:jsonString, url:"/register?t="+new Date().getTime(), contentType:"application/json", success:function (data,type) { alert(data.msg); location.href="/" }, error:function () { alert(data.msg); } }) } $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if(o[this.name]) { if(!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; </script>
表單
<form id="myform" name="myform"> 姓名:<input id="name" type="text" name="name" /><br/> 密碼:<input id="password" type="password" name="password" /><br/> 電話號碼:<input type="number" id="phone" name="phone"><br/> 性別:<input type="radio" id="man" name="gender" value="男">男 <input type="radio" id="women" name="gender" value="女">女<br/> 註冊型別:<select id="object" name="object"> <option value="0" selected="selected">請選擇身份</option> <option value="admin">管理員</option> <option value="teacher">教師</option> <option value="parent">家長</option> <option value="student">學生</option> </select> <br/> </form> <input type="button" value="註冊" onclick="register();"/>