JS-ajax请求后又刷新页面的问题原因解决

53次阅读

共计 744 个字符,预计需要花费 2 分钟才能阅读完成。

如图所示,点击按钮之后,完成请求,页面又会刷新至下面的链接(首页),上面的链接是请求页面,下面的连接是首页,


问题原因出在 HTML 文件上,原因是我把刚才所有的元素都放在了一个 <form> 标志的表单里面了,<form> 里面的 <button> 元素默认 type=submit, 所以每次点击登录 button 后都会执行提交表单的操作,表单操作默认有刷新页面的功能

解决方法,将上述所有元素外层的 <form> 标签去掉或者换成 <div>,或者将 button 的 type 改为 button
最初的 HTML 的代码如下:

                                <form>                        
                                    <div class="form-group">
                                        <label> 更新临时表定时器 </label>
                                        <div class="box-footer">
                                            <button class="btn btn-info" onclick="timerMan('start')"> 开启 </button>
                                            <button class="btn btn-default" onclick="timerMan('stop')"> 停止 </button>
                                        </div>
                                    </div>
                                </form>

后来加上 type=”button”

                          <form>                        
                                <div class="form-group">
                                    <label> 更新临时表定时器 </label>
                                    <div class="box-footer">
                                        <button type="button" class="btn btn-info" onclick="timerMan('start')"> 开启 </button>
                                        <button type="button" class="btn btn-default" onclick="timerMan('stop')"> 停止 </button>
                                    </div>
                                </div>
                            </form>

问题解决

正文完
 0