从 url 提取数据后如何在 html 中显示值答案

【问题标题】：how to display values in html after we extract data from url从 url 提取数据后如何在 html 中显示值
【发布时间】：2020-05-16 10:32:59
【问题描述】：

我正在测试将数据输入test1.html 并单击提交的要求。我在 url 中获取另一个名为 test2.html 的 html 的查询参数。现在读取 url 数据后，我需要显示值。我可以提取数据但如何在 html 正文中显示？

我正在获取的 URL `test2.html`。

file:///D:/test/testing/test2.html?UserFirstName=aa&UserLastName=bb&bday=2020-01-21&Status=consultant&vendorFirstName=aaa&vendorLastName=ccc&employerFirstName=bbb&employerLastName=ddd

test2.html 中的

javascript 和 html 代码 - 试过了，但它没有显示值。有什么帮助吗？

<html>
<body>
<script>

urlp=[];
s=location.toString().split('?');
s=s[1].split('&');
for(i=0;i<s.length;i++)
{
    u=s[i].split('=');
    urlp[u[0]]=u[1];
};

var userfirstname=urlp['UserFirstName'];
var userlastname=urlp['UserlastName'];
var vendorfirstname=urlp['vendorFirstName'];
var vendorlastname=urlp['vendorLastName'];

</script>

<div class="tree">
        <ul>
            <li>
                <a href="#">userfirstname</a>                
                <a href="#">userlastname</a>
                <ul>
                    <li>
                        <a href="#">vendorfirstname</a>
                        <li>
                            <a href="#">vendorlastname</a>
                        </li>
                    </li>  
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

【问题讨论】：

您没有在 <script> 标记中使用这些变量，因此浏览器只会将它们视为纯文本。您需要编写 javascript 代码来设置这些链接的 innerText 属性。给他们一些 id，这样你就可以通过 document.getElementById(id) 获得他们。
我有两个 html。在第一个 html 中，用户输入名字、姓氏、状态、供应商详细信息、雇主代号并单击提交。在第二个 html 中，我得到了 url 中的值。我在第二个 html 中读取了这些值，并根据状态以树结构显示它们。我提到的代码和细节来自第二个 html。请根据此要求告诉我。
您的错误在第二个 html 中，在您显示的代码中。请再次仔细阅读我的评论并打开我给你的 innerText 链接。该链接说明了修复此错误所需的操作。
将用户传入的内容直接放在页面上存在安全风险。它被称为跨站点脚本或 XSS，有许多方法可以降低风险。要查看您的代码是否属于主题，请尝试传入 <script>alert('xss')</script> 作为您的用户名。
@GrahamPHeath，这只是一个原型。实际项目将涵盖所有安全方面。

标签： javascript html

【解决方案1】：

您只是将它分配给一个变量，而不是实际将它放在DOM 上。你需要为它做一些 DOM 操作。首先给你想要值去的元素一个id：

<div class="tree">
        <ul>
            <li>
                <a id="userFirstName" href="#"></a>                
                <a id="userLastName" href="#"></a>
                <ul>
                    <li>
                        <a id="vendorFirstName" href="#"></a>
                        <li>
                            <a id="vendorLastName" href="#"></a>
                        </li>
                    </li>  
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

然后用document对象方法getElementById获取那些元素：

const userFirstNameElement = document.getElementById('userFirstName');
const userLastNameElement = document.getElementById('userLastName');

const vendorFirstNameElement = document.getElementById('vendorFirstName');
const vendorFirstNameElement = document.getElementById('vendorLastName');

然后给他们一个你想要的值：

var userfirstname=urlp['UserFirstName'];
var userlastname=urlp['UserlastName'];
var vendorfirstname=urlp['vendorFirstName'];
var vendorlastname=urlp['vendorLastName'];

userFirstNameElement.innerHTML = userfirstname;
userLastNameElement.innerHTML = userlastname;
vendorFirstNameElement.innerHTML = vendorfirstname;
vendorLastNameElement.innerHTML = vendorlastname;

希望这会有所帮助！

【讨论】：

我有两个 html。在第一个 html 中，用户输入名字、姓氏、状态、供应商详细信息、雇主代号并单击提交。在第二个 html 中，我得到了 url 中的值。我在第二个 html 中读取了这些值，并根据状态以树结构显示它们。我提到的代码和细节来自第二个 html。请根据此要求告诉我。
它仍然是相同的过程，在您从 url 中的查询字符串中获取它之后，您需要按照我提到的过程将其放入 dom 中。通过获取变量的值作为你想要的元素的innerHTML。
如何在body下的html标签中显示innerHTML值？
请阅读我的第二条指令，您可以通过document.getElementById 获取元素，请注意，我为您要放置值的元素提供了id 属性，以便您可以选择它们。在你可以设置它们的值（你保存document.getElementById()结果的变量）并将它们的innerHTML分配给你想要的值之后。

我正在获取的 URL test2.html。

test2.html 中的

javascript 和 html 代码 - 试过了，但它没有显示值。有什么帮助吗？

我正在获取的 URL `test2.html`。