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

Question

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

1. 我找不到将我拥有的值放入网页(例如，放入表格)的可靠方法。我想要一个表格，以便用户可以看到他们在联系表格中输入的内容。

2. 我的表单中有复选框，这导致从 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>

Answer 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 现在返回一个数组，可能是零大小的，而不是像以前那样的字符串，因此您需要以不同的方式调用它，但这是您的下一个挑战:-) 如果这种方法不适合，也许另一种选择是在页面加载时运行它(或变体)一次，查找任何 URL 参数，而不是一个特定的命名参数。这些结果可以存储在您以后可以使用的变量中。

此外，旁注 - 我注意到您的一个参数有错字 - address 而不是 address，这可能会在某些时候让您感到困惑和头痛 future :-)

旁注 - 使用 CSS!从那里取出那些内联样式。

form {
    width: 500px;
}

.label {
    width: 50px;
}

.label-wide {
    width: 100px;
}