Ajax表单提交，需要点击两次才能跳转页面的问题解决方式

问题描述：在页面中有一个表单，包含姓名和密码，通过ajax提交的时候，每次需要点击两次提交按钮才能进行页面跳转。

$(function () {
            $("#btn").click(function () {
                //2.发送ajax请求，提交表单数据
                $.post("userServlet/login",$("#loginForm").serialize(),function (data) {
                    //data : {flag:false,errorMsg:''}
                    if(data.flag){
                        //登录成功
                        location.href="${pageContext.request.contextPath }/product_list.jsp";
                    }else{
                        //登录失败
                        $("#errorMsg").innerHTML(data.errorMsg)

                    }
                });
            });
        });

<form id="loginForm" action="" method="post" accept-charset="utf-8">
                <tr align="center">
                    <td style="border-color: #5CA5D6;height: 40px"><label style="font-weight:bold;" >用户名:</label></td>
                    <td><input type="text" name="username" ><br></td>
                </tr>
                <tr align="center">
                    <td style="border-color: #5CA5D6"><label style="font-weight:bold;" >密码</label></td>
                    <td> <input type="password" name="password"></td>
                </tr>
               <tr>
                   <td colspan="2"><input type="submit" value="提交查询" id="btn"></td>
               </tr>
  </form>

解决方式：不使用type为submit类型的按钮，而是使用type是button的按钮。
产生问题的原因：发生两次提交的原因是在执行完ajax请求后，并没有阻止submit的行为。