的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）。