JavaScript 如何向URL添加参数

JavaScript 如何向URL添加参数

给定一个URL,任务是使用JavaScript向URL添加一个附加参数(名称和值)。

URL.searchParams: URL接口的只读属性,返回一个URLSearchParams对象,提供对URL中GET解码查询参数的访问。

语法:

var URLSearchParams = URL.searchParams;
JavaScript

示例1: 这个示例使用 append方法 添加参数。

<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>  
            How to add a parameter to the URL 
        </title>      
    </head>  
      
    <body style = "text-align:center;"> 
           
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1> 
          
        <p id = "GFG_UP" style = 
            "font-size: 15px; font-weight: bold;"> 
        </p> 
          
        <button onclick = "GFG_Fun()"> 
            Add Parameter 
        </button> 
          
        <p id = "GFG_DOWN" style = 
            "color:green; font-size: 20px; font-weight: bold;"> 
        </p> 
          
        <script> 
            var up = document.getElementById('GFG_UP'); 
            var url = new URL("https://www.geeksforgeeks.org"); 
            up.innerHTML = url; 
            var down = document.getElementById('GFG_DOWN'); 
              
            function GFG_Fun() { 
                url.searchParams.append('param_1', 'val_1'); 
                down.innerHTML = url; 
            } 
        </script>  
    </body>  
</html>                     
HTML

输出:

  • 点击按钮之前:

JavaScript 如何向URL添加参数

  • 点击按钮之后:

JavaScript 如何向URL添加参数

示例2: 此示例使用 set方法 添加参数。

<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>  
            How to add a parameter to the URL 
        </title>      
    </head>  
      
    <body style = "text-align:center;"> 
           
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1> 
          
        <p id = "GFG_UP" style =  
            "font-size: 15px; font-weight: bold;"> 
        </p> 
          
        <button onclick = "GFG_Fun()"> 
            Add Parameter 
        </button> 
          
        <p id = "GFG_DOWN" style = 
            "color:green; font-size: 20px; font-weight: bold;"> 
        </p> 
          
        <script> 
            var up = document.getElementById('GFG_UP'); 
            var url = new URL("https://www.geeksforgeeks.org"); 
            up.innerHTML = url; 
            var down = document.getElementById('GFG_DOWN'); 
              
            function GFG_Fun() { 
                url.searchParams.set('param_1', 'val_1'); 
                down.innerHTML = url; 
            } 
        </script>  
    </body>  
</html>                     
HTML

输出:

  • 在点击按钮之前:

JavaScript 如何向URL添加参数

  • 在点击按钮之后:

JavaScript 如何向URL添加参数

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程