Question

我想从我的联系表单（GET方法并被迫使用JQuery而不是纯JS）生成的URL中解析参数值。它在控制台内部运行，可以正确读取值。我由于不精通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>

Answer 1

要以HTML格式设置值，您可以创建一个包含一行5列的表。您可以为每一列定义一个ID。然后您可以通过以下语法设置值：

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

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

希望它对您有帮助。

Answer 2

对于问题的第一部分，您没有提到尝试过的内容，但是如果您使用的是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;
}

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

2 个答案: