时间戳

首页 > 解决方案 > 在另一个网站上填写我在我的网站上输入的表格

javascript - 在另一个网站上填写我在我的网站上输入的表格

问题描述

我正在尝试使用 javascript 子域自动填写从站点输入的表单，但没有这样的问题。

当我输入日期时我的网址：

www.example.com/example

但它是这样工作的：

https://sub.example.com/example?from_date=21%2F02%2F2021&to_date=26%2F02%2F2021&num_adults=1&num_children=1&check_availabilities=

所以当我在子域中输入日期时，URL地址中没有参数。有什么方法可以在没有参数的情况下传递它？

我的剧本和表格

function loadXMLDoc() {
  var url = "http://example.com";
  var parameters = "foo=bar&bar=baz"; // Construct you form values like field=value&field2=value2&...

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var response = xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST", url, true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.setRequestHeader("Content-length", parameters.length);
  xmlhttp.setRequestHeader("Connection", "close");
  xmlhttp.send(parameters);
}
<div class="booknow-wrapper flexbox">
  <div class="title" style="font-size: 26px; font-weight:600;"><span></span> </div>
  <div class="col-auto">
    <div class="booknow-card">
      <div class="booknow-input">
        <input type="date" name="from_date" id="arrival" value="from_picker" placeholder="Giriş Tarihi" required autocomplete="off">

      </div>
    </div>
  </div>
  <div class="col-auto">
    <div class="booknow-card">
      <div class="booknow-input">
        <input type="date" name="to_date" id="departure" value="to_picker" placeholder="Çıkış Tarihi" required autocomplete="off">

      </div>
    </div>
  </div>

和我的控制台获取

"referrer": "https://sub.exampla.com/booking",
"referrerPolicy": "strict-origin-when-cross-origin",
"body": - 
"from_date=15%2F02%2F2021&to_date=28%2F02%2F2021&num_adults=1&num_children=1&check_availabilities=",
  "method": "POST",

标签： javascripthtmlwordpress

解决方案

只要您在同一个域中，并且您想在子域中传播您在页面中填写的一些数据，您可以将数据保存在浏览器存储中，例如localStorage或sessionStorage：

// register changes
window.localStorage.setItem(name, value);
window.sessionStorage.setItem(name, value);

// retrieving data
window.localStorage.getItem(name)
window.sessionStorage.getItem(name)

您可以在代码片段中看到以下代码，但由于它是沙盒且localStorage不允许使用，因此无法正常工作。您可以在JSFiddle上对相同的代码运行测试。我在这里写的片段仅供参考。

// select your elements
let btnInput = document.getElementById('storage_example_btn');
let btn = document.getElementById('save_btn');
let chgInput = document.getElementById('storage_example_change');
let shwRes = document.getElementById('show_results');
let results = document.getElementById('results');

// when click on "Save Data" button
btn.addEventListener('click', () => {
    // save input data to storage
  sessionStorage.setItem('__SO_EXAMPLE_1__', btnInput.value);
});

// when the "onChange" input changes
chgInput.addEventListener('change', () => {
    // save input data to storage
  sessionStorage.setItem('__SO_EXAMPLE_2__', chgInput.value);
});

// when click on "Show Storage" button
shwRes.addEventListener('click', () => {
    // get input data from storage
  let res1 = sessionStorage.getItem('__SO_EXAMPLE_1__')
  let res2 = sessionStorage.getItem('__SO_EXAMPLE_2__')
  // show it in the result div
  results.innerHTML = 'Session Storage<br/>Data from "Save Data" Input: ' +
                                            res1 + '<br/>Data from "onChange" Input: ' + res2
});
Register data with a button:
<input id="storage_example_btn" type="date"/>
<button id="save_btn">Save Data</button><br/>

Register data <code>onChange</code>:
<input id="storage_example_change" type="date" />

<br/><br/>

<button id="show_results">Show Storage</button>
<div id="results"></div>

作为localStorage实现相同的接口，sessionStorage您可以选择使用哪一个，具体取决于您的应用程序。从文档中检查差异。

推荐阅读