用 POST 介接訂房系統 API 遇到的問題

最近製作某飯店集團網站,其中有個功能需要在網站內提供線上訂房的表單,當使用者選擇分館、入住日期、離開日期之後,按下快速訂房按鈕就直接查詢訂房系統(其他系統商),如圖:

sp161222_151426.png

對方的 API 必須使用POST,不能用GET,一開始想法很簡單,覺得直接用 PHP 的curl就可以了吧,於是我這樣寫:

// index.php

<form id="booking-form" action="booking.php" method="post" target="_blank">
<!-- 裡面省略 -->
</form>

// booking.php

$postData = array(
  "syear"=>$syear,
  "smonth"=>$smonth,
  "sday"=>$sday,
  "eyear"=>$eyear,
  "emonth"=>$emonth,
  "eday"=>$eday,
  "hid"=>$hid,
  "orcnt"=>$orcnt,
  "lang"=>$lang,
);

// cURL POST
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $toUrl);
curl_setopt($ch, CURLOPT_POST, true); // 啟用POST
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($postData)); 
curl_exec($ch); 
curl_close($ch);

當我按下查詢鍵,嗯~對方的網頁內容看起來都回傳成功了,而且網址還是我們的,看起來很專業!館別、語系、時間、blahblah……都對了,咦,圖片怎麼全是叉燒包,看一下 F12,嗯~應該是相對路徑的問題,因為網址還是我們的,他們回傳的路徑應該要改成絕對路徑才對。

於是我滿心歡喜的去找 PM,請系統商把網址都改成絕對路徑,過了不久,系統商來信說把圖片都幫我們改成絕對路徑了(真乖),嗯~圖片都出來了。就在這個 moment,當我覺得一切都沒問題的時候,我才發現事情不是我想的那麼單純,因為當我想在回傳的頁面(此時網址是我們的,但內容是他們的)點任何連結時,都會有問題,因為每一個連結都是相對路徑!

OK,好,看來是我的問題。

於是我開啟「google 工程師」模式(上網到處搜尋),外加問前輩,發現只能回歸最原始的方法,用純粹的 HTML <form>標籤解決,解法是<form>必須直接 submit 到系統商那邊,所以action的位置要修改。但是,由於這個網站架構比較大,有訂房表單的地方不只一個,訂房相關的 code 還是統一在booking.php內維護比較方便,因此我不打算修改前端,而是修改booking.php,從後端產出一個假的form,並配合 Javascript submit 來解決這個問題,以下是我的解法:


// booking.php

// 自動產生 form 且帶入 value 後,用 Javascript submit
$hiddenInput='';
foreach ($postData as $key => $value) {
  $hiddenInput.= <<<HTML
    <input type="hidden" name="{$key}" value="{$value}">
HTML;
}

echo <<<HTML
  <form id="booking_form" action="{$toUrl}" method="post">
    {$hiddenInput}
  </form>
  <script>
    document.getElementById('booking_form').submit();
  </script>
HTML;

耶,世界又恢復和平~

最後更新時間: