时间戳

首页 > 解决方案 > Jquery - 将一个参数的多个值从 URL 解析为 HTML

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

问题描述

我想从我的联系表单生成的 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>

标签： javascriptjqueryhtmlurlcheckbox

解决方案

要以 HTML 形式设置值，您可以创建一个具有 1 行和 5 列的表。对于每一列，您可以定义一个 id。然后您可以通过以下语法设置值：

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

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

希望它可以帮助你。

推荐阅读