如何制作跳转至外部合作航司网站的航班搜索表单

解决方案 #

你的核心需求是把用户选择的航班参数拼接为符合要求的联盟推广链接再跳转，不能直接提交表单到航司官网地址，以下是可直接使用的实现代码：

<form id="flightSearchForm" target="_blank">
  <!-- 出发地下拉框，可替换为你需要的3个国内机场IATA代码 -->
  <div>
    <label>出发地：</label>
    <select name="ds" required>
      <option value="PEK">北京首都(PEK)</option>
      <option value="PVG">上海浦东(PVG)</option>
      <option value="CAN">广州白云(CAN)</option>
    </select>
  </div>
  <!-- 目的地固定，设为隐藏字段，value替换为你站点对应的固定目的地IATA代码 -->
  <input type="hidden" name="as" value="BAR" required>
  <div>
    <label>出发日期：</label>
    <input type="date" id="depDate" required>
  </div>
  <div>
    <label>返程日期：</label>
    <input type="date" id="retDate" required>
  </div>
  <div>
    <button type="submit">搜索航班</button>
  </div>
</form>

<script>
// 固定配置项，替换为你自己的实际参数
const AFFILIATE_TT = '27688_12_298723_'; // 你的联盟追踪ID
const AFFILIATE_ENTRY = 'https://website.com/tickets/'; // 联盟入口地址

document.getElementById('flightSearchForm').addEventListener('submit', function(e) {
  e.preventDefault();
  // 获取表单值
  const ds = this.ds.value;
  const as = this.as.value;
  const depDate = new Date(document.getElementById('depDate').value);
  const retDate = new Date(document.getElementById('retDate').value);
  // 拆分年月，JS中月份从0开始计数所以要+1
  const om = depDate.getMonth() + 1;
  const oy = depDate.getFullYear();
  const im = retDate.getMonth() + 1;
  const iy = retDate.getFullYear();
  // 拼接航司原始搜索路径
  const airlineSearchPath = `/nl-NL/boek-een-vlucht/calendar/viewcalendar/?ds=${ds}&as=${as}&om=${om}&oy=${oy}&im=${im}&iy=${iy}`;
  // 编码后拼接为最终联盟链接
  const finalUrl = `${AFFILIATE_ENTRY}?tt=${AFFILIATE_TT}&r=${encodeURIComponent(airlineSearchPath)}`;
  // 新窗口打开结果
  window.open(finalUrl);
})
</script>

代码说明 #

• 出发地使用下拉选择框替代输入框，避免用户输入错误的机场代码，你可以直接修改select下的option为你需要开放的3个国内机场
• 目的地设为隐藏表单域，不用用户输入，把value改为你站点对应的固定目的地IATA代码即可
• 用HTML原生的date类型输入框实现日期选择，不需要引入额外第三方组件，兼容所有主流浏览器
• 提交时自动拆分日期的年月参数，拼接为航司要求的搜索路径后编码，再和你的联盟追踪参数组合成最终跳转地址

内容的提问来源于stack exchange，提问作者Nickitos