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