如何在新標簽頁中打開URL並傳輸數據

Question

首先，我想說明我是編碼初學者。

我已經從另一個程序員那里處理了一張機票 WordPress 網站編輯。

這是目前的情況：

網站A是我的WordPress網站。 B站是提供API的公司的網站。

網站 A 使用網站 B API 從主搜索表單發送數據，然后在加載網站 A 的同一 window 中，該網站重定向到所有結果所在的網站 B。

請記住：重定向發生在同一個 window 上，從網站 A 到網站 B，沒有新標簽。

我的目標如下：

我希望當前位於網站 A 的用戶在按下主搜索表單的提交按鈕后打開一個新選項卡，在新選項卡中，應該有網站 B 和所有結果。

因此，再一次，網站 A 中的用戶在填寫主搜索表單並單擊“提交”后，應該被重定向到一個新選項卡。 這個新標簽應該有帶有結果的網站 B。

我正在嘗試做的一個例子是，如果您將 go 轉到https://www.kiwi.com/en/並搜索航班。 在那里你可以准確地看到我在說什么。

這是提交按鈕的代碼：

export function initSearchButtonOnClick() {
  $("#search-button").on("click", function (e) {
    e.preventDefault();
    switch (flightType) {
      case "rt":
      case "ow":
        if (
          $("#from-destination")[0].reportValidity() &&
          $("#to-destination")[0].reportValidity()
        ) {
          const fromDestination = $("#from-destination")
            .val()
            .split("(")[1]
            .slice(0, -1);
          const toDestination = $("#to-destination")
            .val()
            .split("(")[1]
            .slice(0, -1);
          const fromDate = $("#depart-date").val();
          const returnDate = $("#return-date").val();
          const adultsQty = $(".traveller-select.adultsQty").val();
          const childQty = $(".traveller-select.childQty").val();
          const babyQty = $(".traveller-select.babyQty").val();
          const noOvernightStopover = $("#no-overnight-stopover").is(":checked")
            ? "on"
            : "";
          const noAirportChange = $("#no-airport-change").is(":checked")
            ? "on"
            : "";
          const directFlight =
            $("#direct-flight").is(":checked") ||
            $("#direct-flight-mobile").is(":checked")
              ? "on"
              : "";
          const timePickup = $("#time-pickup").val();
          const flightClass = $("#flight-class").val();
          const selectedAirline = $("#airline-select").val();

          activateLoadingOverlay();

          setTimeout(function () {
            if (flightType == "rt") {
              $.redirect(
                `${baseUrl}/${fromDestination}/${toDestination}/${fromDate}-${returnDate}/${adultsQty}/${childQty}/${babyQty}/rt`,
                {
                  NoOvernightStopover: noOvernightStopover,
                  NoAirportChange: noAirportChange,
                  PsgrDirect: directFlight,
                  FlexDatePOST: timePickup,
                  PsgrClass: flightClass,
                  PsgrCarrier: selectedAirline,
                }
              );
            } else {
              $.redirect(
                `${baseUrl}/${fromDestination}/${toDestination}/${fromDate}/${adultsQty}/${childQty}/${babyQty}/ow`,
                {
                  NoOvernightStopover: noOvernightStopover,
                  NoAirportChange: noAirportChange,
                  PsgrDirect: directFlight,
                  FlexDatePOST: timePickup,
                  PsgrClass: flightClass,
                  PsgrCarrier: selectedAirline,
                }
              );
            }
          }, 3000);
        }
        break;
      case "ms":
        const multiFromDestinationList = $(".multi-from-destination.tt-input");
        const multiToDestinationList = $(".multi-to-destination.tt-input");
        const multiDateList = $(".multi-datepicker");
        const adultsQty = $(".multi-traveller-select.adultsQty").val();
        const childQty = $(".multi-traveller-select.childQty").val();
        const babyQty = $(".multi-traveller-select.babyQty").val();
        const timePickup = $("#multi-time-pickup").val();
        const noOvernightStopover = $("#no-overnight-stopover").is(":checked")
          ? "on"
          : "";
        const noAirportChange = $("#no-airport-change").is(":checked")
          ? "on"
          : "";
        const directFlight =
          $("#multi-direct-flight").is(":checked") ||
          $("#direct-flight-mobile").is(":checked")
            ? "on"
            : "";
        const flightClass = $("#flight-class").val();
        const selectedAirline = $("#airline-select").val();

        let isFormValid = true;
        const numberOfFlights = multiFromDestinationList.length;
        for (let index = 0; index < numberOfFlights; index++) {
          if (
            !multiFromDestinationList[index].reportValidity() ||
            !multiToDestinationList[index].reportValidity() ||
            !multiDateList[index].reportValidity()
          ) {
            isFormValid = false;
          }
        }
        let dynamicQuery = "";
        if (!isFormValid) return;

        for (let index = 0; index < numberOfFlights; index++) {
          const fromDestination = multiFromDestinationList[index].value
            .split("(")[1]
            .slice(0, -1);
          const toDestination = multiToDestinationList[index].value
            .split("(")[1]
            .slice(0, -1);
          const flightDate = multiDateList[index].value;
          dynamicQuery += `/${fromDestination}/${toDestination}/${flightDate}`;
        }

        activateLoadingOverlay();

        setTimeout(function () {
          $.redirect(
            `${baseUrl}${dynamicQuery}/${adultsQty}/${childQty}/${babyQty}/ms/${numberOfFlights}`,
            {
              NoOvernightStopover: noOvernightStopover,
              NoAirportChange: noAirportChange,
              PsgrDirect: directFlight,
              FlexDatePOST: timePickup,
              PsgrClass: flightClass,
              PsgrCarrier: selectedAirline,
            }
          );
        }, 3000);

        break;
      default:
        return;
    }
  });
}

我一直在嘗試使用window.open('MY URL', '_blank'); 但我不知道如何傳遞參數/數據的 rest：

{
NoOvernightStopover: noOvernightStopover,
NoAirportChange: noAirportChange,
PsgrDirect: directFlight,
FlexDatePOST: timePickup,
PsgrClass: flightClass,
PsgrCarrier: selectedAirline,
}

我一直在搜索整個 inte.net，但找不到任何幫助。

非常感謝您的時間和幫助。

如果您想確切知道我所說的網站，它是https://www.aviokarte.me/

Answer 1

使用此方法（只需將方法和目標添加到現有 function 調用的末尾）

$.redirect(
            `${baseUrl}${dynamicQuery}/${adultsQty}/${childQty}/${babyQty}/ms/${numberOfFlights}`,
            {
              NoOvernightStopover: noOvernightStopover,
              NoAirportChange: noAirportChange,
              PsgrDirect: directFlight,
              FlexDatePOST: timePickup,
              PsgrClass: flightClass,
              PsgrCarrier: selectedAirline,
            }, 'POST', '_blank'
          );

這是文檔https://github.com/mgalante/jquery.redirect