防止页面重新加载jQuery

Question

如果页面已完全加载，代码对我来说工作正常，但是问题是，如果页面处于加载模式，请单击链接以重新加载，以防止重新加载。

$(document).ready(function(){
  $('#myModal').on('show.bs.modal', function (e) {
    e.preventDefault();
    var key = $(e.relatedTarget).data('id');
    $('#loadingmessage').show();
    $.ajax({
      type : 'post',
      url : 'test.php',  
      data :  'key='+ key, 
      success : function(data) {
      $('.modal-body').html(data);
    },
    complete: function() {
      $('#loadingmessage').hide();
    }
  });
  return false;
 });
});

我的HTML在这里

<a href='' data-toggle='modal' data-target='#myModal' data-id='1:2:3:4'>UP</a>

如果页面已完全加载，而我单击此按钮，则ajax调用工作正常，但是如果页面加载（如果我单击），则页面将再次开始重新加载，而我又如何防止它重新加载。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">Check Server Status</h4>
                </div>
                <div class="modal-body">
                <div id="loadingmessage">Checking...</div>
                 </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>

Answer 1

<a href='#' data-toggle='modal' data-target='#myModal' data-id='1:2:3:4'>UP</a>