有问题的登录页面
<form id="submitFrom" method="post" action="login_login">//**注意method和action** <div class="form-group has-feedback"> <input type="text" name="username" id="username" class="form-control" placeholder="Username"> <span class="glyphicon glyphicon glyphicon-user form-control-feedback"></span> </div> <div class="form-group has-feedback"> <input type="password" name="password" id="password" class="form-control" placeholder="Password"> <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-4"> <button id="loginButton" class="btn btn-primary btn-block btn-flat">登录</button> </div> </div> </form>
有问题的js
//登录操作服务器校验 $('#loginButton').click(function(){ var username = $("#username").val(); var password = $("#password").val(); //验证是否为空或长度等操作 if(username == ""){//不贴密码验证空了,排版麻烦。 $("#username").tips({ msg: '用户名不得为空', side: 2, bg: '#AE81FF', time: 2 }); $("#username").focus(); return false;//注意这,应当结束然后什么都不干的。 }else{ $("#username").val(jQuery.trim($('#username').val())); } $.ajax({ type:'POST', url:'<%=basePath%>login_login', /*data: $('#submitFrom').serialize(),*///这种或下面那种,好像不太一样。由于做测试 data:{"username":username,"password":password}, dataType: 'json', async:false, cache:false, success: function (data) { //do something if ("success" == data.msg && data.status == 200) { window.location.href= "<%=basePath%>main/index"; }else{ //do something } }, error:function(data){ //do something } }); });
浏览器调试 只填用户名不填密码执行 return false;然后js代码停了,浏览器会默认自动通过form的参数给你发个提交请求,然后返回json下面这样的
{ “success”: false, “status”: 404, “msg”: “error” }
问题解决:
无问题的页面
<form id="submitFrom">//**只加id** <div class="form-group has-feedback"> <input type="text" name="username" id="username" class="form-control" placeholder="Username"> <span class="glyphicon glyphicon glyphicon-user form-control-feedback"></span> </div> <div class="form-group has-feedback"> <input type="password" name="password" id="password" class="form-control" placeholder="Password"> <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-4"> <button id="loginButton" class="btn btn-primary btn-block btn-flat">登录</button> </div> </div> </form>
无问题的js
//登录操作服务器校验 $('#submitFrom').submit(function(event){//**click改为submit,对象改为form,function加event重点** event.preventDefault(); // **阻止默认事件重点** //[http://www.w3school.com.cn/jsref/event_preventdefault.asp](http://www.w3school.com.cn/jsref/event_preventdefault.asp) var username = $("#username").val(); var password = $("#password").val(); //验证是否为空或长度等操作 if(username == ""){//不贴密码验证空了,排版麻烦。 $("#username").tips({ msg: '用户名不得为空', side: 2, bg: '#AE81FF', time: 2 }); $("#username").focus(); return false;//结束就是结束了。 }else{ $("#username").val(jQuery.trim($('#username').val())); } $.ajax({ type:'POST', url:'<%=basePath%>login_login', /*data: $('#submitFrom').serialize(),*///这种或下面那种,好像不太一样。由于做测试 data:{"username":username,"password":password}, dataType: 'json', async:false,//不要异步要同步 cache:false,//不缓存 success: function (data) { //do something if ("success" == data.msg && data.status == 200) { window.location.href= "<%=basePath%>main/index"; }else{ //do something } }, error:function(data){ //do something } }); });
写在后面:无问题的js 就算通过ajaxpost提交成功由于还没返回结果(回调函数)就已经被Form自动默认又提交一遍了!!返回来就是json 给浏览器解析并不是预期的回调函数。
HTTP405错误是接收的方法要用post你却用了get,什么你没有get 你的确没用。浏览器默认帮你用了!!不信postman 做测试
踩了两三天坑 慢慢排除出错的原因,收获不小。
欢迎分享本文,转载请保留出处:前端ABC » form和$.ajax.post重复提交问题解决记录