按钮type值的设置导致ajax提交失效

背景
关于按钮属性type值得设置导致ajax提交失效得问题，早在学习java web阶段就已经遇到过了，但是由于当时觉得自己遇到得bug就会记住，属实有点眼高手低了哈，最近在帮同学做一个小项目，由于需要使用ajax异步调用后端接口来实现动态路由。于是设置了一个form表单，弄了一个搜索框（这里实现比较随便了，没有用es），设置了一个提交按钮。问题来了，我的提交按钮设置了是type=“sumbit”。于是找了一上午得bug，我后端就没收到请求。到了下午才想到可能是type属性设置的问题。于是将type属性设置为button完美解决。太菜了。劝小伙伴们以后遇到bug问题一定要记录下来，这样印象才会深刻。不然即使再厉害，也会出现间歇式记忆的，言归正传，下面介绍为什么会出现这样的问题。
 
 
form表单项(这一块type="sumbit"是错误的)

<form class="navbar-form navbar-right" role="search">
      <div class="form-group">
          <input id="searchContext" type="text" class="form-control" placeholder="Search">
      </div>
      <input type="sumbit" class="btn btn-default" onclick="search()" value="Sumbit">
</form>

 
ajxa请求部分

function search(){
        var context = $("#searchContext").val()
        console.log("context: ",context)
        if(context == null){
            window.location.href="/user"
        }else{
            $.ajax({
                async: false,//同步，待请求完毕后再执行后面的代码
                type: "POST",
                url: '/getSearchMenu',
                data:{'menuname':context},
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    console.log(data)
                    if(data instanceof Object){
                       window.location.href="/"+data.menu.menuroute
                    }
                },
                error: function (error) {
                    alert("你好呀")
                }
            })
        }
    }

 
原因
当我们使用ajax请求接口时，提交按钮的属性值必须设置为button，如果设置为type=“sumbit”，它会做两件事，即提交了form表单中设置的action接口，也会提交ajax请求，这就会导致ajax还没执行结束，页面就刷新一次了。所以就出现了根本没调到后端的接口。
 
解决方案
将type="sumbit"设置为"button"即可

<input type="sumbit" class="btn btn-default" onclick="search()" value="Sumbit">

 
补充知识
关于input标签中type属性的不同类型的定义与区分

<input type="button"/> <%--定义为一个可点击的按钮。如果没有添加onclick监听事件，点击是没有任何反应的。--%>
<input type="submit"/> <%--定义为一个提交按钮。提交按钮会把表单数据发送到服务器--%>
<input type="submit" disabled/> <%--可以通过设置属性禁用提交动作，默认为true--%>