如何在新标签页中打开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