html page jump passing parameters

HTML page jump passing parameters is a commonly used technology in Web development. By passing parameters, data interaction and information transfer between pages can be achieved, providing users with more personalized services. This article will introduce several ways to implement HTML page jump and pass parameters.

1. URL Parameter Passing

URL parameter passing is one of the most commonly used methods of passing parameters when jumping to an HTML page. We often see URL addresses with parameter information, for example:

http://www.example.com/index.php?id=10&name=test

where, after ? id=10&name=test is the parameter information passed, id and name are parameter names, 10 and test are parameter values. The specific implementation method is as follows:

1. Define the link address in the source page:

Click to jump

Among them, target.html is the target page Address, the id=10&name=test after ? is the parameter information to be passed.

2. Get the parameter value in the target page:

//Get the value of the id parameter
var id = GetQueryString("id");
//Get the name parameter The value of
var name = GetQueryString("name");

//Get URL parameters
function GetQueryString(name){

var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return  unescape(r[2]); return null;

}

Pass The above method can obtain the passed parameter information in the target page and perform corresponding operations as needed.

2. Form submission and passing parameters

Form submission is another commonly used method of passing parameters by jumping to an HTML page. Through form submission, data can be transferred to the specified page to realize data interaction between pages. The specific implementation method is as follows:

1. Define the form in the source page:

Among them, action is the target page address, method is the submission method, and the get method is used to submit here. id and name are the parameter names to be passed, and 10 and test are the parameter values ​​to be passed.

2. Get the parameter value in the target page:

//Get the value of the id parameter
var id = GetQueryString("id");
//Get the name parameter The value of
var name = GetQueryString("name");

//Get URL parameters
function GetQueryString(name){

var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return  unescape(r[2]); return null;

}

Pass Form submission can implement more complex data transfer, such as passing multiple parameters or passing files.

3. Cookie transfer parameters

Cookie is a technology that stores data on the client and can transfer parameter information between HTML pages. The specific implementation method is as follows:

1. Set cookies in the source page:

document.cookie="id=10";
document.cookie="name=test";

Set cookie information through document.cookie, id and name are the parameter names to be passed, 10 and test are the parameter values ​​to be passed.

2. Get the cookie value in the target page:

//Get the value of the id parameter
var id = getCookie("id");
//Get the name parameter The value
var name = getCookie("name");

//Get the cookie value of the specified name
function getCookie(name){

var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
    return decodeURIComponent(arr[2]);
else
    return null;

}

Passing parameters through cookies can achieve data sharing and information transfer between different pages, but it should be noted that the amount of data stored in cookies is limited and it is not appropriate to pass too large parameter information.

The above introduces several methods for transferring parameters when jumping to an HTML page. Different methods are suitable for different scenarios. Front-end developers can choose appropriate methods to implement data interaction and information transfer between pages according to specific needs, providing users with more personalized services.

The above is the detailed content of html page jump passing parameters. For more information, please follow other related articles on the PHP Chinese website!