禁用模式中按钮的刷新[重复]

Question

我的模态按钮有问题。在这个按钮上我放了一个onclick，但问题是当点击这个mouse或enter时，页面刷新。

这就是我希望它可以点击ENTER 并且我的页面执行我的功能connexion() 不会刷新，因为在里面制作了一个 AJAX 代码。

这是我的模态代码：

<div class="modal fade" id="myModalLogin" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
     <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="myModalLabel">Se connecter</h4>
          </div>
          <div class="modal-body">
              <div class="row">
                  <div class="col-md-12">
                      <div id='wellconnexion' class="well">


                          <h1 id="TitleHistoriqueconnnexion" class="text-center">Se connecter</h1>
                          <br>

                           <h4 id="ContentHistorique1"></h4>

                          <div id='contentconnexion' class="contentconnexion">
                           <form >
                             <div class="form-group formmarginleft">
                                <input  name="user_login" id="user_login" type="text" placeholder="Identifiant" class="form-control">
                             </div>
                             <div class="form-group formmarginleft">
                                 <input name="user_password" id="user_password" type="password"  placeholder="Mot de passe" class="form-control">
                            </div>
                          <div class="row">
                             <div class="col-12-xs text-center">
                             <button id="validerlogin" onclick="connexion()" value="Se connecter" class="btn btn-primary">Se connecter</button>
                             <div data-dismiss="modal" class="btn btn-warning">Fermer</div>
                              </div>
                          </div>
                          </form>

                        </div>
                    </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </div>

Answer 1

在您的 onclick 函数中使用 preventDefault 函数来防止它重新加载页面。这应该可以解决问题。

https://api.jquery.com/event.preventdefault/

Answer 2

在您的按钮元素上将属性type 设置为button：

<button type="button" ... >Se connecter</button>

默认情况下，按钮元素设置类型属性等于submit，所以当你点击这个按钮时，你的页面会被提交到服务器。

您可以查看MDN 文档

submit：按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值。

Answer 3

使用 preventDefault http://www.w3schools.com/jsref/event_preventdefault.asp

关于你的“connexion()”函数......