jquery ajax通过函数传递变量

我需要一些帮助完成我的脚本，允许用户确认他们的总线预留。我使用jQuery/AJAX：jquery ajax通过函数传递变量

允许用户输入的日期和地点在自己的div有总线搜索可用的公交车
显示每个结果（每条总线）的数据库信息和一个按钮，用户发送的确认页面是在名为彩盒

我要完成什么模式对话框：

当用户点击回复按钮，拥有jQuery的收集总线数量，日期和地点，这样我可以自己决定，以确认其在预订前与座椅选择一起显示在模式对话框的信息
一旦他们点击的模式对话框的确认按钮，选中的座位沿再聚公交信息和更新公交车数据库

这是index.php文件：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("a, input:submit").button(); 
     $("#date").datepicker({ 
     showOtherMonths: true, 
     selectOtherMonths: true,  
     changeMonth:true, 
     changeYear:true, 
     numberOfMonths:1, 
     showButtonPanel:true, 
     showOn: "button", 
     buttonImage: "images/calendar.gif", 
     buttonImageOnly: true, 
     dateFormat:'yy-mm-dd' 
     }); 
     $('#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++) { 
         if (data.bus[$i].seats > 20) 
          { 
           var price = 50 
          } 
       else if (data.bus[$i].seats <= 20 && data.bus[$i].seats > 10) 
        { 
         var price = 45 
        } 
       else 
        { 
         var price = 40 
        } 
       var html = '<div id="' + data.bus[$i].number + '">'; 
       html += '<div id="bus_num">' + '<b>BUS #</b>' + data.bus[$i].number + '</div>'; 
       html += '<div id="bus_graphic"></div>'; 
       html += '<div id="capacity">' + '<h1>Capacity</h1>' + data.bus[$i].capacity + '</div>'; 
       html += '<div id="time">' + '<h1>Departure</h1>' + data.bus[$i].time + '</div>'; 
       html += '<div id="seats">' + '<h1>Open Seats</h1>' + data.bus[$i].seats + '</div>'; 
       html += '<div id="price">$' + price + '</div>'; 
       html += '<a class="rsvp" href="#rsvp">RSVP</a>'; 
       html += '</div>'; 
       $('#main').append(html); 
      } 
     $("a.rsvp").button(); 
     $(".rsvp").colorbox({width:"640px", inline:true, href:"#rsvp"}); 
     } 
    }); 
    return false; 
       }); 
        }); 
        </script> 


        <body> 

       <div style='display:none'> 
         <div id='rsvp'> 
          <?php include("colorbox.php");?>    
         </div> 
        </div> 
        </body>

个colorbox.js：

 $(document).ready(function() { 
    // Add click listener to seats 
    $('#airplane a').click(function() 
     { 
      // Asign value of the link target 
      var thisTarget = $(this).attr('href'); 

      $(thisTarget).addClass('selected'); 

      // Assign the value of the parent <li class="*"> 
      var thisSeat = $(this).parent('li').attr('class'); 

      // Toggle selected class on/off 
      $(this).toggleClass('selected'); 
      return false; 
     }); 

    $('#book').click(function() 
    { 
     //collect user and bus information to store in database 

    }); 
      });

colorbox.php：

    <ul id="airplane"> 

    <li class="seat_01 A"><a href="#row_01" title="01A">01A</a></li> 
    <li class="seat_01 B"><a href="#row_01" title="01B">01B</a></li> 
    <li class="seat_01 C"><a href="#row_01" title="01C">01C</a></li> 
    <li class="seat_01 D"><a href="#row_01" title="01D">01D</a></li> 

    <li class="seat_02 A"><a href="#row_02" title="02A">02A</a></li> 
    <li class="seat_02 B"><a href="#row_02" title="02B">02B</a></li> 
    <li class="seat_02 C"><a href="#row_02" title="02C">02C</a></li> 
    <li class="seat_02 D"><a href="#row_02" title="02D">02D</a></li> 

    <li class="seat_03 A"><a href="#row_03" title="03A">03A</a></li> 
    <li class="seat_03 B"><a href="#row_03" title="03B">03B</a></li> 
    <li class="seat_03 C"><a href="#row_03" title="03C">03C</a></li> 
    <li class="seat_03 D"><a href="#row_03" title="03D">03D</a></li> 

    <li class="seat_04 A"><a href="#row_04" title="04A">04A</a></li> 
    <li class="seat_04 B"><a href="#row_04" title="04B">04B</a></li> 
    <li class="seat_04 C"><a href="#row_04" title="04C">04C</a></li> 
    <li class="seat_04 D"><a href="#row_04" title="04D">04D</a></li> 

    <li class="seat_05 A"><a href="#row_05" title="05A">05A</a></li> 
    <li class="seat_05 B"><a href="#row_05" title="05B">05B</a></li> 
    <li class="seat_05 C"><a href="#row_05" title="05C">05C</a></li> 
    <li class="seat_05 D"><a href="#row_05" title="05D">05D</a></li> 

    <li class="seat_06 A"><a href="#row_06" title="06A">06A</a></li> 
    <li class="seat_06 B"><a href="#row_06" title="06B">06B</a></li> 
    <li class="seat_06 C"><a href="#row_06" title="06C">06C</a></li> 
    <li class="seat_06 D"><a href="#row_06" title="06D">06D</a></li> 

    <li class="seat_07 A"><a href="#row_07" title="07A">07A</a></li> 
    <li class="seat_07 B"><a href="#row_07" title="07B">07B</a></li> 
    <li class="seat_07 C"><a href="#row_07" title="07C">07C</a></li> 
    <li class="seat_07 D"><a href="#row_07" title="07D">07D</a></li> 

    <li class="seat_08 A"><a href="#row_08" title="08A">08A</a></li> 
    <li class="seat_08 B"><a href="#row_08" title="08B">08B</a></li> 
    <li class="seat_08 C"><a href="#row_08" title="08C">08C</a></li> 
    <li class="seat_08 D"><a href="#row_08" title="08D">08D</a></li> 

    <li class="seat_09 A"><a href="#row_09" title="09A">09A</a></li> 
    <li class="seat_09 B"><a href="#row_09" title="09B">09B</a></li> 
    <li class="seat_09 C"><a href="#row_09" title="09C">09C</a></li> 
    <li class="seat_09 D"><a href="#row_09" title="09D">09D</a></li> 

    <li class="seat_10 A"><a href="#row_10" title="10A">10A</a></li> 
    <li class="seat_10 B"><a href="#row_10" title="10B">10B</a></li> 
    <li class="seat_10 C"><a href="#row_10" title="10C">10C</a></li> 
    <li class="seat_10 D"><a href="#row_10" title="10D">10D</a></li> 

    <li class="seat_11 A"><a href="#row_11" title="11A">11A</a></li> 
    <li class="seat_11 B"><a href="#row_11" title="11B">11B</a></li> 
    <li class="seat_11 C"><a href="#row_11" title="11C">11C</a></li> 
    <li class="seat_11 D"><a href="#row_11" title="11D">11D</a></li> 

    <li class="seat_12 A"><a href="#row_12" title="12A">12A</a></li> 
    <li class="seat_12 B"><a href="#row_12" title="12B">12B</a></li> 
    <li class="seat_12 C"><a href="#row_12" title="12C">12C</a></li> 
    <li class="seat_12 D"><a href="#row_12" title="12D">12D</a></li> 

    <li class="seat_13 A"><a href="#row_13" title="13A">13A</a></li> 
    <li class="seat_13 B"><a href="#row_13" title="13B">13B</a></li> 
    <li class="seat_13 C"><a href="#row_13" title="13C">13C</a></li> 
    <li class="seat_13 D"><a href="#row_13" title="13D">13D</a></li> 

    <li class="seat_14 A"><a href="#row_14" title="14A">14A</a></li> 
    <li class="seat_14 B"><a href="#row_14" title="14B">14B</a></li> 
    <li class="seat_14 C"><a href="#row_14" title="14C">14C</a></li> 
    <li class="seat_14 D"><a href="#row_14" title="14D">14D</a></li> 

    <li class="seat_15 A"><a href="#row_15" title="15A">15A</a></li> 
    <li class="seat_15 B"><a href="#row_15" title="15B">15B</a></li> 
    <li class="seat_15 C"><a href="#row_15" title="15C">15C</a></li> 
    <li class="seat_15 D"><a href="#row_15" title="15D">15D</a></li> 

    <li class="seat_16 A"><a href="#row_16" title="16A">16A</a></li> 
    <li class="seat_16 B"><a href="#row_16" title="16B">16B</a></li> 
    <li class="seat_16 C"><a href="#row_16" title="16C">16C</a></li> 
    <li class="seat_16 D"><a href="#row_16" title="16D">16D</a></li> 

    <li class="seat_17 A"><a href="#row_17" title="17A">17A</a></li> 
    <li class="seat_17 B"><a href="#row_17" title="17B">17B</a></li> 
    <li class="seat_17 C"><a href="#row_17" title="17C">17C</a></li> 
    <li class="seat_17 D"><a href="#row_17" title="17D">17D</a></li> 

    <li class="seat_18 A"><a href="#row_18" title="18A">18A</a></li> 
    <li class="seat_18 B"><a href="#row_18" title="18B">18B</a></li> 
    <li class="seat_18 C"><a href="#row_18" title="18C">18C</a></li> 
    <li class="seat_18 D"><a href="#row_18" title="18D">18D</a></li> 

    <li class="seat_19 A"><a href="#row_19" title="19A">19A</a></li> 
    <li class="seat_19 B"><a href="#row_19" title="19B">19B</a></li> 
    <li class="seat_19 C"><a href="#row_19" title="19C">19C</a></li> 
    <li class="seat_19 D"><a href="#row_19" title="19D">19D</a></li> 

    <li class="seat_20 A"><a href="#row_20" title="20A">20A</a></li> 
    <li class="seat_20 B"><a href="#row_20" title="20B">20B</a></li> 
    <li class="seat_20 C"><a href="#row_20" title="20C">20C</a></li> 
    <li class="seat_20 D"><a href="#row_20" title="20D">20D</a></li> 

    <li class="seat_21 A"><a href="#row_21" title="21A">21A</a></li> 
    <li class="seat_21 B"><a href="#row_21" title="21B">21B</a></li> 
    <li class="seat_21 C"><a href="#row_21" title="21C">21C</a></li> 
    <li class="seat_21 D"><a href="#row_21" title="21D">21D</a></li> 

    <li class="seat_22 A"><a href="#row_22" title="22A">22A</a></li> 
    <li class="seat_22 B"><a href="#row_22" title="22B">22B</a></li> 
    <li class="seat_22 C"><a href="#row_22" title="22C">22C</a></li> 
    <li class="seat_22 D"><a href="#row_22" title="22D">22D</a></li> 

    <li class="seat_23 A"><a href="#row_23" title="23A">23A</a></li> 
    <li class="seat_23 B"><a href="#row_23" title="23B">23B</a></li> 
    <li class="seat_23 C"><a href="#row_23" title="23C">23C</a></li> 
    <li class="seat_23 D"><a href="#row_23" title="23D">23D</a></li> 

    <li class="seat_24 A"><a href="#row_24" title="24A">24A</a></li> 
    <li class="seat_24 B"><a href="#row_24" title="24B">24B</a></li> 
    <li class="seat_24 C"><a href="#row_24" title="24C">24C</a></li> 
    <li class="seat_24 D"><a href="#row_24" title="24D">24D</a></li> 

    <li class="seat_25 A"><a href="#row_25" title="25A">25A</a></li> 
    <li class="seat_25 B"><a href="#row_25" title="25B">25B</a></li> 
    <li class="seat_25 C"><a href="#row_25" title="25C">25C</a></li> 
    <li class="seat_25 D"><a href="#row_25" title="25D">25D</a></li> 
</ul> 
<!-- end #airplane --> 
    <p> 
     <input type="submit" value="Save" class="button" id="book" /> 
    </p> 
     </div>

我认为我需要创建一个id或class分配给每个成功的搜索结果中的函数，然后创建另一个函数，将处理将变量传递给确认页面。请帮忙！这是至关重要的。提前致谢。

来源

2011-06-06 kevsteez

你可以只用简单的ID选择像这样收集到的信息：

$('#bus_num') 
$('#time') 
$('#seats') 
//etc

然后您可以利用.text或.html方法来把这个信息到一个模式对话框，possibly boxy plugin is an option here.

那么您什么时候去提交值传递到你的数据库进行更新，再次使用选择器中的信息，将其格式化为一个对象并传递到你的ajax函数。 jQuery将自动清理并转换为查询字符串：

var post_details = { 
    'bus_num': $('#bus_num').text(), 
    'time': $('#time').text() 
}; 

$.post('/confirm_booking', post_details, [....]);

来源

2011-06-06 07:30:46

感谢Gary回答。是否有可能为每条公交车上的公交信息创建一个对象？当我需要发布或显示公交信息时，我可能会访问这个对象。 – kevsteez 2011-06-07 02:15:28

jquery ajax通过函数传递变量

回答

相关问题