通过

通过数据参数将多个值传递到 Web 资源

（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>

使用此页面

  1. 使用示例代码创建名为 new_/ShowDataParams.htm 的网页 Web 资源。

    要传递的参数是：first=First Value&second=Second Value&third=Third Value

    注释

    如果您通过表单编辑器中的“Web 资源属性”对话框添加静态参数，只需将参数直接粘贴到 Custom Parameter(data) 列中，无需进行编码。 门户会为你编码这些值，但仍需要对其进行解码并提取页面中的值。

  2. 对于在代码中生成的动态值，在参数中使用 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 资源添加到窗体，并将未编码的参数粘贴到 自定义参数（数据） 列中，只需预览窗体即可。

  3. 显示 new_/ShowDataParams.htm 动态生成的表：

    参数 价值
    第一 第一个值
    秒 第二个值
    第3 个 第三个值

工作原理

若要访问数据查询字符串参数值中嵌入的值，请在网页 Web 资源中提取参数的值 data 。 然后使用代码分析字符串，以便你可以单独访问每个名称/值对。

当 DOM 准备就绪时，将通过 DOMContentLoaded 事件监听器调用 displayDataParameters 函数。 此函数使用 URLSearchParams API 从查询字符串中提取 data 参数。 如果函数找到数据参数，它将使用 decodeURIComponent 该值解码，并将其分析为 URL 编码的参数。 如果未找到任何数据参数，该 showMessage 函数将显示一条信息性消息。

该 createParametersTable 函数使用模板文本和新式数组方法生成 HTML 表，以显示参数名称值对。 escapeHtml 辅助函数会在将参数值渲染到表格之前，安全地转义其中的任何 HTML 内容，从而防止 XSS 攻击。

另见

网页 （HTML） Web 资源
Web 资源

  • Last updated on