使用ajax通過下拉菜單更新div標籤

Question

我想使用AJAX更新div標籤。當點擊「顯示」按鈕時，將對下拉菜單中指定的頁面發出AJAX請求。該頁面上包含的JSON對象將顯示在標有「其他頁面」的div內。我有多個將被使用的JSON文件。如何使用下拉菜單更新div標籤？

JS：

function start() 
{ 
    $("#clickme").text("Calling server"); 

    $.ajax(
    { 
     url : "mikey.json", 
     success : callbackFunction, 
     error : errorFunction, 
     dataType : 'json' 
    }); 
} 

function callbackFunction(data, info) 
{ 
    $("#clickme") 
     .text("result: " + (data && data.name ? data.likes: "(No likes)")); 
} 

function errorFunction(data, info) 
{ 
    $("#clickme").text("error occurred:" + info); 
} 

HTML：

<div id="clickme" onclick="start()">Other page</div> 
<form method="post" id="frm"> 
    <table> 
     <tr> 
      <td>Current roommate: </td> 
      <td> 
       <select name="room" id="rooms"> 
        <option value="1" id="mi">Mikey</option> 
        <option value="2" id="sa">Sarah</option> 
        <option value="3" id="er">Sam</option> 
       </select> 
      </td> 
     </tr> 
     <tr> 
      <td></td> 
      <td> 
       <input type="submit" value="Display" > 
      </td> 
     </tr> 
    </table> 
</form> 

Answer 1

觸發通過下拉列表中的事件，您可以簡單地這樣做

$(document).ready(function() { 
    $('#rooms').on('change', function() { 
     var data = $(this).val(); //you can retrieve the drop down list value 
     start(); 
    }); 
} 

，並在啓動方法，你可以調用ajax，然後在回調Success上，可以修改div。 （正如您現在所使用的）

Answer 2

您需要在選擇選項中指定json的值，並在提交時將這些值傳遞給ajax函數。

HTML：

<div id="clickme">Other page</div> 
<form method="post" id="frm"> 
    <table> 
     <tr> 
      <td>Current roommate: </td> 
      <td> 
       <select name="room" id="rooms"> 
        <option value="mikey.json" id="mi">Mikey</option> 
        <option value="sarah.json" id="sa">Sarah</option> 
        <option value="sam.json" id="er">Sam</option> 
       </select> 
      </td> 
     </tr> 
     <tr> 
      <td></td> 
      <td> 
       <input type="submit" value="Display"> 
      </td> 
     </tr> 
    </table> 
</form> 

的jQuery：

$(document).ready(function(){ 
    $("#frm").submit(function(event){ 
     event.preventDefault(); 
     var jsonUrl = $("#rooms").val(); 
     $("#clickme").text("Calling Server"); 
     $.ajax({ 
      url : jsonUrl, 
      data: $("#frm").serialize(), 
      dataType : 'json', 
      success: function (data) { 
       $("#clickme").text("result: " + (data && data.name ? data.likes: "(No likes)")); 
      }, 
      error : function(jqXHR, textStatus, errorThrown) { 
       $("#clickme").text("error occurred:" + errorThrown); 
      }, 
      dataType : 'json' 
     }); 
    }); 
}); 

如果你想div來改變，因爲人是通過選擇點擊（而不是等待他們提交的形式），你可以做到以下幾點：

$(document).ready(function(){ 
     $("#rooms").change(function(){ 
     var jsonUrl = $(this).val(); 
     $("#clickme").text("Calling Server"); 
     $.ajax({ 
      url : jsonUrl, 
      data: $("#frm").serialize(), 
      dataType : 'json', 
      success: function (data) { 
       $("#clickme").text("result: " + (data && data.name ? data.likes: "(No likes)")); 
      }, 
      error : function(jqXHR, textStatus, errorThrown) { 
       $("#clickme").text("error occurred:" + errorThrown); 
      }, 
      dataType : 'json' 
     }); 
    }); 
});