讓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'); 
    }); 
});