Jquery - 将一个参数的多个值从 URL 解析为 HTML答案

【问题标题】：Jquery - parsing multiple values of one parameter from URL to HTMLJquery - 将一个参数的多个值从 URL 解析为 HTML
【发布时间】：2019-02-10 01:46:17
【问题描述】：

我想从我的联系表单生成的 URL 中解析参数值（GET 方法并强制使用 JQuery 而不是纯 JS）。它在控制台内工作，值被正确读取。我有两个问题来自于不精通 Jquery 和 JS。

我找不到将我拥有的值放入网页（例如，放入表格）的可靠方法。我想要一个表格，以便用户可以看到他们在联系表单中输入的内容。
我的表单中有复选框，这导致从 URL 读取值时出现问题。如果我选中四个框中的两个，则只会读取其中一个并将其打印到控制台中。我需要阅读用户提供的所有信息。我想我需要数组，但在这种情况下如何使用它们？

生成的 URL 示例。

localhost:63342/2018-11-13-html/form_sent.html?phone=4325325235&adress=testadress&order=book1&order=book2&deliverydate=datadostawy&deliverymethod=chinamail&agree=on

我当前用于读取和记录 URL 参数的代码：

<section>
    <script>
        $.urlParam = function (name) {
            var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                .exec(window.location.href);
            if (results == null) {
                return 0;
            }
            return results[1] || 0;
        };

        console.log($.urlParam('phone'));
        console.log($.urlParam('adress'));
        console.log($.urlParam('order'));
        console.log($.urlParam('deliverydate'));
        console.log($.urlParam('deliverymethod'));
    </script>
</section>

还有我的表格：

<section>
    <header><h2>Contact</h2></header>
    <form style="width:500px" action="form_sent.html" method="get">
        <fieldset>
            <legend>Contact form:</legend>
            <fieldset>
                <legend>Contact info:</legend>
                <span class="label" style="width: 50px">Phone: </span>
                <input name="phone" type="tel" required="true"/><br/>
                <span class="label" style="width: 50px">Adress: </span>
                <input name="adress" type="text" required="true"/><br/>
            </fieldset>
            <fieldset>
                <legend>Order:</legend>
                <span class="label" style="width: 100px">Books:</span>
                <br>
                <input type="checkbox" name="order" value="book1"/>Book1<br/>
                <input type="checkbox" name="order" value="book2"/>Book2<br/>
                <input type="checkbox" name="order" value="book3"/>Book3<br/>
                <input type="checkbox" name="order" value="book4"/>Book4<br/>
            </fieldset>
            <fieldset>
                <legend>Delivery date:</legend>
                <span class="label" style="width: 50px">Date: </span>
                <input type="text" name="deliverydate" required="true"/><br/>
            </fieldset>
            <fieldset>
                <legend>Delivery method:</legend>
                <input type="radio" name="deliverymethod" value="fedx" />FEDx
                <input type="radio" name="deliverymethod" value="chinamail"/>China Mail
                <input type="radio" name="deliverymethod" value="personal" checked="true"/>In person<br/>
            </fieldset>
            <input name="agree" type="checkbox" required="true"/> I agree to contact terms<br/>
            <input type="reset" value="Reset form"/><input type="submit" value="Send form"/>
        </fieldset>
    </form>
</section>

【问题讨论】：

标签： javascript jquery html url checkbox

【解决方案1】：

对于您问题的第一部分，您没有提到您尝试过的内容，但如果您使用的是 jQuery，.html() 和 .text() 方法是常用的方法，并且非常简单。

在您的 HTML 中使用一些 CSS 类和 ID，以便您可以精确地选择要定位的元素。例如，假设您的 form_sent.html 页面包含以下内容：

<table>
    <tr>
        <td>Phone</td>
        <td>Address</td>
        ....
    </tr>
    <tr>
        <td class='phone'></td>
        <td class='address'></td>
        ....
</table>

现在在 jQuery 中，您可以定位这些单元格并添加如下内容：

$('.phone').text($.urlParam('phone'));

关于你问题的第二部分，这有点棘手。首先，您需要在正则表达式中添加g 标志，以确保您匹配所有次出现，而不仅仅是第一次：

RegExp('[\?&]' + name + '=([^&#]*)', 'g')

接下来，使用您当前使用.exec() 的方法，您需要反复迭代以匹配多个匹配项。 The MDN docs have an example of exactly this。

这是您的代码的更新版本，使用他们的方法：

$.urlParam = function (name) {
    var reg = new RegExp('[\?&]' + name + '=([^&#]*)', 'g'),
        matches = [];

    while ((results = reg.exec(window.location.href)) !== null) {
        matches.push(results[1])
    }

    return matches;
};

// Now:
// console.dir($.urlParam('phone'));
// console.dir($.urlParam('order'));
//
// Array(1)
//   0: "4325325235"
//   
// Array(2)
//   0: "book1"
//   1: "book2"
//

$.urlParam 现在返回一个大小可能为零的数组，而不是以前的字符串，因此您需要以不同的方式调用它，但这是您的下一个挑战 :-) 如果这种方法不适合，也许另一种选择是在页面加载时运行它（或变体）一次，寻找 any URL 参数，而不是一个特定的命名参数。这些结果可以存储在一个变量中，供您以后使用。

另外，附注 - 我注意到你的一个参数有一个错字 - adress 而不是 address，这可能会在未来的某个时候让你感到困惑和头痛 :-)

附注 - 使用 CSS！将那些内联样式从那里取出。

form {
    width: 500px;
}

.label {
    width: 50px;
}

.label-wide {
    width: 100px;
}

【讨论】：

【解决方案2】：

要在 HTML 表单中设置值，您可以创建一个包含 1 行 5 列的表。对于每一列，您可以定义一个 id。然后您可以通过以下语法设置值：

$("#table #firstColumn").text($.urlParam('phone'));// This is just for one, you can repeat the step for others.

对于您的单选按钮，您为所有四个单选按钮定义了相同的名称。您应该为它们提供不同的名称以获取这些值。

希望对您有所帮助。

【讨论】：