ajax提交 和 表单提交引起本页面 刷新和后台中断

一 需求

将原本表单提交改成ajax提交，目的将后台异常信息提示到页面

原本代码

<form type="post" action="">
    <input name="id"></input>
    <button class="tj-btn">提交</button>
</form>

初步解决

<form>
    <input name="id"></input>
    <button class="tj-btn">提交</button>
</form>

给提交按钮绑定了点击事件，拿到每个input值，通过异步提交到后台接口

 

二 现象

正确的填完信息后，本业地址栏已GET形式显示出每个name值，并且刷新页面，然后后台接口断点也能停住，然后console打印的信息是：IOException，远程已中断

 

三 原因

可能我比较菜，搞了几个小时，后来才知道，改过后的代码还是一个form表单提交，默认的是GET请求，所以地址栏出现每个input的值！至于页面会刷新，是因为两种提交方式同时执行！

四 解决

1 form改成div

<div>
    <input name="id"></input>
    <button class="tj-btn">提交</button>
</div>

 

2 button 换成a标签