前端ajax请求碰到的一个问题

今天在和服务端联调前端页面，第一个界面就是login页面， 然鹅前端问题很多，一个最脑残的现象就是，点击login之后，跳转出现了问题，跳转到了一个空页面，然后打印了服务端返回的错误信息，所以服务端那边就报问题了。

然后再前端仅仅数行的代码中，去找啊找啊找啊找啊原因，找了很久吧。最后发现了问题所在，就是我用的form表单，登录按钮是button，而它的type类型为submit，这个submit类型点击之后，会提交表单内容。

而同时button通过click，在jQuery.ajax中异步请求服务端进行登录验证，所以导致先进入了表单提交中，而form里面是没有写action的，所以就出现了问题了。

解决办法是，如果是表单的话，里面有button，如果type写成submit的话，那么会提交到表单form标签的action指定内容中去。如果用ajax异步请求的话，那么button的type就改为button好了，或者就不用button，而是用在通过class实现button效果吧。不然带来的问题真是有点坑服务端的同学了。哎。

问题代码：

<form method="post">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" placeholder="请输入用户名" name="username" id="user_login">
      </div>
      <div class="form-group">
          <label>密码</label>
          <input type="password" class="form-control" placeholder="请输入密码" name="password" id="user_password">
     </div>
     .................
     <button type="submit" class="btn btn-success btn-flat m-b-30 m-t-30" id="login-btn">登录</button>
     .............
</form>

改正后代码:

<form method="post">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" placeholder="请输入用户名" name="username" id="user_login">
      </div>
      <div class="form-group">
          <label>密码</label>
          <input type="password" class="form-control" placeholder="请输入密码" name="password" id="user_password">
     </div>
     .................
     <button type="button" class="btn btn-success btn-flat m-b-30 m-t-30" id="login-btn">登录</button>
     .............
</form>

再看jQuery.ajax请求：

   <script type="text/javascript">
        jQuery(document).ready(function($){
            $("#login-btn").click(function(){
                var username = $("input[name=username]").val();
                var password = $("input[name=password]").val();
                alert("username = " + username + " password = " + password);
                $("#tip").hide();

                $.ajax({
                    url : '/admin/login',
                    type : 'post',
                    data : {
                        username: username,
                        password: password
                    },
                    dataType : 'json',
                    success : function(result) {
                        alert("status = " + result.status + " msg = " + result.msg);
                        if (result.status == 0) {
                            window.location.href="/admin/index";
                        }else{
                            $("#tip div").text(result.msg);
                            $("#tip").show();
                        }
                    },
                    error : function() {
                        alert("error");
                        $("#tip div").text("登录请求出错!");
                        $("#tip").show(2000);
                    }
                });
            })
        });
    </script>

使用问题代码，接收到result之后，返回的数据，直接显示在了新窗口中看，因为先执行form中的submit。
使用正确代码，接收result之后，就走了对应的设置tip登录验证错误提示。

到这里，login这样一个简单登录的前端后台验证，就已经差不多调通了，真是脑壳疼。。。。

这样的操作结果才是想要的结果了。入坑了，这个是一个教训吧。