让AJAX请求按钮被点击

Question

首先的时候，我不是真的熟悉JQuery的和AJAX。通过尝试我在网上找到的所有内容，我想出了下面的代码，并且说实话我并不完全理解它。

我希望显示一个引导模式，其中包含单击按钮时数据库中的记录。 我的问题是，当页面加载时，它已经打开了模式，而不是点击按钮时。

<button id="modalData">Load Modal</button> 

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title" id="myModalLabel">Plantilla</h4> 
      </div> 
      <div class="modal-body"> 
       <table class="table table-striped table-bordered table-hover"> 
        <thead> 
         <tr> 
          <th>Item Code</th> 
          <th>New Item Code</th> 
          <th>Position</th> 
          <th>Station</th>          
         </tr> 
        </thead> 
        <tbody> 
         <c:forEach var="plantilla" items="${sessionScope.plantilla}">          
          <tr> 
           <td><c:out value="${plantilla.getItemCode()}"/></td> 
           <td><c:out value="${plantilla.getNewItemCode()}"/></td> 
           <td><c:out value="${plantilla.getPosition()}"/></td> 
           <td><c:out value="${plantilla.getStation()}"/></td>                   
          </tr> 
         </c:forEach> 
        </tbody> 
       </table> 
      </div> 

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

这是我的脚本：

$("#modalData").click(loadPlantilla()); 

$.when(loadPlantilla()).done(function() { 
    $('#modal').modal('show'); 
}); 

function loadPlantilla() {     
    return $.ajax({ 
     url: './TryAjax', 
     type: 'POST', 
     error: function() { 
      alert('Ajax readyState: ' + xhr.readyState + '\nstatus: ' + xhr.status + ' ' + err); 
     } 
    }); 
} 

，这是我的Servlet：

PlantillaViewDao dao = new PlantillaViewDao(); 
List<PlantillaView> plantilla = dao.read(); 

HttpSession session = request.getSession(); 
session.setAttribute("plantilla", plantilla); 

Answer 1

你调用该函数，而不是立即的传递引用。

$("#modalData").click(loadPlantilla); 

你的Ajax请求还可以使用.done：

function loadPlantilla() {     
    $.ajax({ 
     url: './TryAjax', 
     type: 'POST', 
     error: function() { 
      alert('Ajax readyState: ' + xhr.readyState + '\nstatus: ' + xhr.status + ' ' + err); 
     } 
    }).done(function() { 
     $('#modal').modal('show'); 
    }); 
} 

快速浏览一下这个fiddle。

Answer 2

$。当执行你的方法......这就是为什么它是在页面加载显示。

function loadPlantilla() {     
    $.ajax({ 
     url: './TryAjax', 
     type: 'POST' 
    }).done(function() { 
     $('#modal').modal('show'); 
     }); 
} 

你必须这样做。

或者，如果你真的想用$。当（也许是因为你有一个以上的AJAX调用）是这样的：

$("#modalData").click(function() { 
    $.when(loadPlantilla(), method2(), method3()).done(function() { 
     $('#modal').modal('show'); 
    }); 
});