的jQuery/AJAX數據庫查詢後創建JavaScript對象

Question

你好，這是我想要運行的代碼示例：

 $('#search1').submit(function(){ 
    var date = $('#date').val(); 
    var location = $('#location').val(); 
    var datastring = 'date=' + date + '&location=' + location; 
    $.ajax({ 
     type: "POST", 
     cache: "true", 
     url: "search.php", 
     dataType:"json", 
     data: datastring, 
     success: function(data){ 
      $('#main').html('') 
      for ($i = 0, $j = data.bus.length; $i < $j; $i++) { 

       //Create an object for each successful query result that holds information such as departure time, location, seats open... 

        $('#main').append(html); 

      } 

我怎麼會去編碼成功的功能？我希望對象存儲每條公共汽車的信息，以便信息可以顯示在搜索結果中，以及當用戶稍後確認其RSVP時能夠被引用。由於時間提前

Answer 1

你可以聲明的目的是使用在包含範圍內的地圖：

var busInfo = {}; 

...然後如果總線條目有某種形式的唯一標識符，可以錄製他們像這樣：

success: function(data){ 
    var $i, $j, bus; 

    $('#main').html('') 
    for ($i = 0, $j = data.bus.length; $i < $j; $i++) { 
     // Remember this bus by ID 
     bus = data.bus[$i]; 
     busInfo[bus.id] = bus; 

     $('#main').append(html); 
    } 
} 

再後來，當用戶選擇公交車，使用所選ID來獲得完整的總線信息：

var bus = busInfo[theChosenId]; 

這是可行的，因爲所有JavaScript對象都是鍵/值映射。密鑰總是字符串，但解釋器會高興地將字符串輸出（例如，busInfo[42] = ...將起作用，42將隱含地變爲"42"）。

如果你只是想要一個數組，你的data.bus已經是一個了，對吧？

var busInfo = []; 

// .... 

success: function(data){ 
    var $i, $j; 

    // Remember it 
    busInfo = data.bus; 

    $('#main').html('') 
    for ($i = 0, $j = data.bus.length; $i < $j; $i++) { 

     $('#main').append(html); 
    } 
} 

（請注意，JavaScript數組aren't really arrays，他們也都是名/值映射。）

---

更新：我沖斷鍵控對象的一個​​簡單的例子（live copy）：

HTML：

<input type='button' id='btnLoad' value='Load Buses'> 
<br>...and then click a bus below: 
<ul id="busList"></ul> 
...to see details here: 
<table style="border: 1px solid #aaa;"> 
    <tbody> 
    <tr> 
     <th>ID:</th> 
     <td id="busId">--</td> 
    </tr> 
    <tr> 
     <th>Name:</th> 
     <td id="busName">--</td> 
    </tr> 
    <tr> 
     <th>Route:</th> 
     <td id="busRoute">--</td> 
    </tr> 
    </tbody> 
</table> 

JavaScript的使用jQuery：

jQuery(function($) { 
    // Our bus information -- note that it's within a function, 
    // not at global scope. Global scope is *way* too crowded. 
    var busInfo = {}; 

    // Load the buses on click 
    $("#btnLoad").click(function() { 
    $.ajax({ 
     url: "http://jsbin.com/ulawem", 
     dataType: "json", 
     success: function(data) { 
     var busList = $("#busList"); 

     // Clear old bus info 
     busInfo = {}; 

     // Show and remember the buses 
     if (!data.buses) { 
      display("Invalid bus information received"); 
     } 
     else { 
      $.each(data.buses, function(index, bus) { 
      // Remember this bus 
      busInfo[bus.id] = bus; 

      // Show it 
      $("<li class='businfo'>") 
       .text(bus.name) 
       .attr("data-id", bus.id) 
       .appendTo(busList); 
      }); 
     } 
     }, 
     error: function() { 
     display("Error loading bus information"); 
     } 
    }); 
    }); 

    // When the user clicks a bus in the list, show its deatils 
    $("#busList").delegate(".businfo", "click", function() { 
    var id = $(this).attr("data-id"), 
     bus = id ? busInfo[id] : null; 
    if (id) { 
     if (bus) { 
     $("#busId").text(bus.id); 
     $("#busName").text(bus.name); 
     $("#busRoute").text(bus.route); 
     } 
     else { 
     $("#busId, #busName, #busRoute").text("--"); 
     } 
    } 
    }); 

}); 

數據：

{"buses": [ 
    {"id": 42, "name": "Number 42", "route": "Highgate to Wycombe"}, 
    {"id": 67, "name": "Old Coach Express", "route": "There and Back"} 
]} 

---

題外話：請注意，我添加var $i, $j;你的成功的功能。沒有它，你就會墮入The Horror of Implicit Globals，你可以從名字中看出這是一件壞事^（tm）。