（HTML）网页只能接受名为data的单个查询参数。 若要在数据参数中传递多个值，需要在您的页面中对参数进行编码和解码。
HTML Web 资源示例演示了一种在单个参数中传递附加值，然后在 Web 资源中处理这些值的技术。
注释
仅支持字母数字字符作为 Web 资源的参数。 查询字符串中包含的所有字符都经过验证，以确保传递的参数的有效性。 如果验证过程发现任何无效参数，请求将失败。 例如，传递用尖括号括起的文本值会被视为无效的参数类型。
HTML Web 资源示例
以下 HTML 代码表示一个网页 （HTML） Web 资源，该资源包含一个定义四个函数的脚本：
displayDataParameters：当 DOM 准备就绪时调用，此函数使用 URLSearchParams API 从查询字符串中提取和分析
data参数，然后显示结果。showMessage：向用户创建和显示信息性消息，例如错误消息或状态更新。
createParametersTable：接收分析的参数，并使用模板文本和新式数组方法生成 HTML 表以显示参数名称值对。
escapeHtml：一种安全辅助函数，通过在参数值渲染到表格前安全转义 HTML 内容，从而防止 XSS 攻击。
注释
查询字符串中包含的所有字符都使用 encodeURIComponent 函数进行编码。 此函数使用 JavaScript 解码URIComponent 函数 解码传递的值。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show Data Parameters Page</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
background-color: #d6e8ff;
margin: 20px;
}
table {
width: 100%;
max-width: 600px;
border-collapse: collapse;
margin-top: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #333;
color: white;
font-weight: 600;
}
tbody tr {
background-color: white;
}
tbody tr:hover {
background-color: #f5f5f5;
}
.message {
font-size: 16px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<script>
// Wait for DOM to be ready
document.addEventListener('DOMContentLoaded', () => {
displayDataParameters();
});
function displayDataParameters() {
// Use URLSearchParams API for modern query string parsing
const urlParams = new URLSearchParams(window.location.search);
const dataParam = urlParams.get('data');
if (!dataParam) {
showMessage("No data parameter was passed to this page");
return;
}
try {
// Parse the data parameter
const decodedData = decodeURIComponent(dataParam);
const params = new URLSearchParams(decodedData);
if (params.size === 0) {
showMessage("No data parameter was passed to this page");
return;
}
showMessage("These are the data parameter values that were passed to this page:");
createParametersTable(params);
} catch (error) {
showMessage("Error parsing data parameter: " + error.message);
}
}
function showMessage(text) {
const message = document.createElement('p');
message.className = 'message';
message.textContent = text;
document.body.appendChild(message);
}
function createParametersTable(params) {
// Create table using template literals for cleaner HTML generation
const tableHTML = `
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Value</th>
</tr>
</thead>
<tbody>
${Array.from(params.entries())
.map(([key, value]) => `
<tr>
<td>${escapeHtml(key)}</td>
<td>${escapeHtml(value)}</td>
</tr>
`).join('')}
</tbody>
</table>
`;
document.body.insertAdjacentHTML('beforeend', tableHTML);
}
// Helper function to prevent XSS by escaping HTML
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
</script>
</body>
</html>
使用此页面
使用示例代码创建名为
new_/ShowDataParams.htm的网页 Web 资源。要传递的参数是：
first=First Value&second=Second Value&third=Third Value注释
如果您通过表单编辑器中的“Web 资源属性”对话框添加静态参数，只需将参数直接粘贴到 Custom Parameter(data) 列中，无需进行编码。 门户会为你编码这些值，但仍需要对其进行解码并提取页面中的值。
对于在代码中生成的动态值，在参数中使用
encodeURIComponent方法。 编码的值包括：first%3DFirst%20Value%26second%3DSecond%20Value%26third%3DThird%20Value打开将编码参数作为数据参数值传递的页面：
https://<server name>/WebResources/new_/ShowDataParams.htm?data=first%3DFirst%20Value%26second%3DSecond%20Value%26third%3DThird%20Value注释
如果将 Web 资源添加到窗体，并将未编码的参数粘贴到 自定义参数（数据） 列中，只需预览窗体即可。
显示
new_/ShowDataParams.htm动态生成的表：参数 值 第一 第一个值 秒 第二个值 第3 个 第三个值
工作原理
若要访问数据查询字符串参数值中嵌入的值，请在网页 Web 资源中提取参数的值 data 。 然后使用代码分析字符串，以便你可以单独访问每个名称/值对。
当 DOM 准备就绪时，将通过 DOMContentLoaded 事件监听器调用 displayDataParameters 函数。 此函数使用 URLSearchParams API 从查询字符串中提取 data 参数。 如果函数找到数据参数，它将使用 decodeURIComponent 该值解码，并将其分析为 URL 编码的参数。 如果未找到任何数据参数，该 showMessage 函数将显示一条信息性消息。
该 createParametersTable 函数使用模板文本和新式数组方法生成 HTML 表，以显示参数名称值对。
escapeHtml 辅助函数会在将参数值渲染到表格之前，安全地转义其中的任何 HTML 内容，从而防止 XSS 攻击。