Question

我有一个页面A，它有一个名为supplier的输入元素和一个按钮。当我单击按钮时，从新窗口打开新页面B。该窗口具有一个表格，允许我从服务器端查询supplier表格。当我完成查询时，我想选择一个结果并将其传递给A页，然后将其显示在A页的输入元素中，而不刷新它。

我知道我可以使用Modal和Ajax来做到这一点，但我正在尝试寻找不同的方法来实现它。

页面A：

<div class="form-group">
    <label for="supplier">supplier：</label>
    <input class="form-control" type="text" id="supplier">
    <input type="button" class="btn btn-default" onclick="window.open('page_b.html','newWindow','alwaysRaised=yes')" />
</div>

页面B：

<form>
    <div action="query" method="POST">
        <input type="text" id='code_input' name="supplier_code" class="form-controll"/>
        <input type="text" id='name_input' name="supplier_name" class="form-controll"/>
    </div>
    <input type="submit"/>
</form>

<table class="show">
    <tr>
        <th>checkbox</th>
        <th>supplier_code</th>
        <th>supplier_name</th>
    <tr/>
    <tr>
        <td><input type="checkbox" value="1"></td>
        <td>HQ123</td>
        <td>Apple</td>
    </tr>
    <!-- This is where I want to pass the value of checkbox to page A and close  page B -->
    <input type="submit"/>

</table>

我知道HTTP是无状态的，所以我想也许我可以使用cookie来存储页面B的结果，但是当我关闭页面B并通过单击提交按钮存储cookie时，如何通知页面A以获得结果从Cookie？

编辑：html是无状态的。HTTP是无状态的。

Answer 1

您可以在第二个窗口中用opener引用第一个窗口。只需在窗口A上定义一个函数，然后从窗口B调用它即可。这里，我们通过一个FormData对象将其转换为数组来获取完整的表单数据。由于所有这些操作都在使用相关窗口的同一来源内发生，因此不需要复杂的消息传递系统。

页面A JavaScript

function setData(data)
{
  // do what you want with your data, here log to browser console
  console.log(data);
}

页面B HTML

<form>
  <table class="show">
    <tr>
      <th>checkbox</th>
      <th>supplier_code</th>
      <th>supplier_name</th>
    <tr/>
    <tr>
      <td><input name="HQ123_Apple" type="checkbox" value="1"></td>
      <td>HQ123</td>
      <td>Apple</td>
    </tr>
  </table>

  <button id="btn-use-data" type="button">Use data and close</button>
</form>

B页JavaScript

document.addEventListener('DOMContentLoaded', ev =>
{
  document.getElementById('btn-use-data').addEventListener('click', ev =>
  {
    opener.setData(Array.from(new FormData(ev.target.form)));
    window.close();
  });
});

只有选中的复选框出现在数组中。请注意，表单输入元素需要具有name属性才能列出。

Answer 2

您可以将localstorage与javascript一起使用。按时间值可在页面中找到。您可以通过Storage.setItem（）方法将该值保存到localstorage，然后可以使用Storage.getItem（）方法将其取回。 Here you may find more details

单击A页面中的按钮以打开新的页面B，当关闭页面B时，页面A从B获取参数而无需刷新，是否可以？

2 个答案: