2014-02-10 96 views
0

我建設使用Expedia的API http://developer.ean.com/docs/hotel-list/目前我有從以下URL酒店的JSON輸出列表酒店列表:從表單搜索中檢索數據。使用基於JSON API網址檢索數據

API Sample

然後我有一個簡單foreach循環從上面的URL顯示的酒店

<--! Form to search for hotels !--> 
<form action=""> 

     <p> Rooms: 
     <select name="rooms"> 
      <option value="value1" selected>1</option> 
      <option value="value2">2</option> 
      <option value="value3">3</option> 
     </select> 
     </p> 

     <p>Arrival Date: <input type="text" id="datepicker"></p> 

     <p>Departure Date: <input type="text" id="datepicker2"></p> 

     <input type="submit" value="Submit"> 

    </form> 

    <?PHP 
//use latest minorRev 14 
    $url ='http://api.ean.com/ean-services/rs/hotel/v3/list?minorRev=99'; 
    $url .= '&apiKey=7z6tduachrht362dpnsch34v'; 
    $url .= '&cid=55505'; 
    $url .= '&locale=en_US&city=Dallas&stateProvinceCode=TX&countryCode=US&numberOfResults=3'; 
    $url .= '&searchRadius=50'; 
//using the cache returns results much faster 
    $url .= '&supplierCacheTolerance=MED_ENHANCED'; 
//dates and occupancy 
    $url .='&arrivalDate=09/04/2014&departureDate=09/05/2014&room1=2'; 
    $header[] = "Accept: application/json"; 
    $header[] = "Accept-Encoding: gzip"; 
    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_HTTPHEADER, $header); 
    curl_setopt($ch,CURLOPT_ENCODING , "gzip"); 
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET'); 
    curl_setopt($ch, CURLOPT_URL, $url); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
    $response = json_decode(curl_exec($ch)); 
    $response = curl_exec($ch); 

    ?> 

     <h1>Hotels</h1> 

     <?PHP 

// Decode the json data 

     $data_json = json_decode(file_get_contents($url)); 
     $HotelListResponse = $data_json->{"HotelListResponse"}; 
     $HotelList = $HotelListResponse->{"HotelList"}; 
     $HotelSummary = $HotelList->{"HotelSummary"}; 

     print_r($url); 

// Loop through the hotels 

     foreach ($HotelSummary as $hotel): ?> 

     <h2><?php echo $hotel->name; ?></h2> 

     <img src="http://images.travelnow.com<?php echo $hotel->thumbNailUrl; ?>" alt=""> 

     <ul class="hotel-location"> 
      <li><?php echo $hotel->address1; ?></li> 
      <li><?php echo $hotel->city; ?></li> 
      <li><?php echo $hotel->stateProvinceCode; ?></li> 
      <li><?php echo $hotel->postalCode; ?></li> 
      <li><?php echo $hotel->countryCode; ?></li> 
     </ul> 

     <?php $cleartags = strip_tags($hotel->shortDescription); ?> 

     <p><?php strip_tags($cleartags); ?></p> 

     <a class href="<?php echo $hotel->deepLink; ?>" alt="">Book Now</a> 

     <img src="<?php echo $hotel->tripAdvisorRatingUrl; ?>" alt=""> 

    <?php endforeach; ?> 

上面示出了可以在以下URL可以看出酒店的列表:http://kfdev.co.uk/dev/hotels/

但是,我現在需要自定義前端顯示數據的輸出。我基本上需要一個可以自定義搜索結果的表單。例如,用戶應該能夠改變其搜索的一些參數,例如房間大小,到達和離開日期。

我想知道如何讓$ url選項變量位於可以隨時更改的窗體中。正如您可以看到$ url變量中的信息,例如arrivalDate = 09/04/2014和room1 = 2會影響json數據的輸出。

我正在尋找關於如何在可以顯示新數據的表單中動態更改此數據的指導。現在我只是擁有一個靜態url,除了當前頁面上的內容外,最終用戶無法看到任何其他數據。

回答

1

爲了在最終用戶填寫表單時從服務器獲取動態數據,可以在窗體的某些輸入(例如onchange,onkeyup或任何您需要的)上綁定回調,並通過ajax請求請求服務器,並且相應地顯示結果。

有一些指針,我假設你使用jquery:

編輯:

看到你的表格後,你可以這樣做

$("#datepicker").change(function() { 
    var arrival = $(this).val(); 
    $.getJSON("data.php", {arrivalDate: arrival}) 
    .done(function(data) { 
     // update your ui here 
    }).fail(function(j,t,e) { 
     // handle error here 
    }); 
}); 

使用data.php,這是一個腳本,它返回一個帶有顯示所需數據的json文件,之後調用api.ean.com