Question

我将表格中的数据从第1页传递到第2页。

第1页

<form action="page2.html" method="get" id="newMember">
  <input name="name" type="text" id="memberName">
  <input name="age" type="number" id="memberAge">
  <input name="binary" type="radio" id="memberBinary">

  <input type="submit" value="submit">
</form>

然后在第2页，网址将如下所示：

..page2.html?name=bob&age=21&binary=yes

所以我想做的是使用jQuery填充空div，以及来自url的相应数据点。

在第2页，我有以下空div

<div id="name"> </div>
<div id="age"> </div> 
<div id="binary"> </div>

我不知道如何使用jQuery抓取url中的数据点并将它们传递给空div。

Answer 1

您可以通过javascript：

执行此操作

function getQueryStringByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

然后您可以将此功能用作：

var name = getQueryStringByName('name');

然后您可以将此名称放入div的innerHTML中，其中id =＆＃39; name＆＃39;

希望这有帮助。

Answer 2

您可以通过访问window.location.search然后清理它来完成此操作。循环遍历对中的每个项目，然后您可以根据ID编写文本。这个单行将完成所有操作，但必须在DOM完全加载时运行。

如果您正在使用jQuery，那么将此代码放在$(document).ready()中，更新textContent代码以使用jQuery变体，因为它支持更多浏览器（我认为）。

这是伪代码：

删除主要问号
将字符串拆分为键值对数组
使用每对，找到ID等于的DOM元素到密钥并将其文本内容设置为值。

以下是纯JavaScript版本：

window.location.search
    .replace(/^\?/, '')
    .split('&')
    .map(function(pair) {
        var keyValue = pair.split('=');
        var element = document.getElementById(keyValue[0])
        if (element) element.textContent = keyValue[1];
});

jQuery Variant：

window.location.search
    .replace(/^\?/, '')
    .split('&')
    .map(function(pair) {
        var keyValue = pair.split('=');
        var element = $('#' + keyValue[0])
        if (element) element.text( keyValue[1] );
});

使用jQuery将表单中的输入传递给空div

2 个答案: