JavaScript data transmission between different pages (URL parameter acquisition)

On web pages, we often encounter this situation: when we enter information on a certain page, it will jump to another page and pass the information we entered to another page. How do we do it?
Today, let’s try it out in practice. For example, there are two pages now. When we enter user information on one page, we will jump to another page and display the xx welcome to login interface.

Let’s take a look at the design ideas first:

The first login page contains a submission form, and action is submitted to index.html page
The second page can use the parameters of the first page, thus achieving the effect of transferring data between different pages
The second page can use the data from the first page because it uses the location.search parameter in the URL.
In the second page, this parameter needs to be extracted.
The first step is to use substr to remove it?
The second step is to use split('=') to separate the key and value
The first array is the key and the second array is the value

The implementation code is:

<body>
    <form action="index.html">
        Username: <input type="text" name = 'uname'>
        <input type="submit" value="Submit">
    </form>
</body>

<body>
    <div><span style="font-weight:700; color:blue"></span>Welcome to log in! </div>
    <script>
       var span = document.querySelector('span'); //Get the span tag var myName = location.search.substr(1); //Get the parameter entered on the previous page var arr = myName.split('='); //Use the = sign to split the key and value span.innerHTML = arr[1] + '' //Pass the data into span
    </script>
</body>

The running effect is:

This concludes this article on the transmission of JavaScript data on different pages (URL parameter acquisition). For more information on the transmission of JavaScript data on different pages, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Summary of 4 methods for front-end JS to obtain URL parameters
Several common methods for native JS to obtain URL link parameters
Two methods to obtain URL parameters based on JavaScript
Detailed explanation of the getRequest() method example for obtaining URL parameters in js
JS obtains url parameters and sends POST request method in json format
Detailed explanation of how to get the querystring parameter in the URL in JavaScript
JavaScript method to obtain URL parameters

<<: MySQL database transaction example tutorial

>>: About input file control and beautification

Analysis of the methods of visual structure layout design for children's websites

JavaScript data transmission between different pages (URL parameter acquisition)

Analysis of the methods of visual structure layout design for children's websites

Use Docker to run multiple PHP versions on the server

Core skills that web front-end development engineers need to master

How to install JDK and Mysql on Ubuntu 18.04 Linux system

JavaScript source code for Elimination

Detailed explanation of native Javascript inheritance methods and their advantages and disadvantages

Detailed explanation of the case of dynamically generating tables using JavaScript

How to redirect PC address to mobile address in Vue

Docker container regularly backs up the database and sends it to the specified mailbox (design idea)

Introduction to MySQL database performance optimization

Recommend

Detailed explanation of the use of umask under Linux

Several ways to submit HTML forms_PowerNode Java Academy

Detailed explanation of MYSQL stored procedure comments

Detailed explanation of for loop and double for loop in JavaScript

Nginx load balancing configuration, automatic switching mode when downtime occurs

Solve the MySQL login 1045 problem under centos

Sample code for batch deployment of Nginx with Ansible

How to delete folders, files, and decompress commands on Linux servers

Use Meta tag code to set 360 Dual-core Browser to default to high-speed mode instead of compatible mode

Various problems and solutions in the process of deploying Tomcat to release projects on Linux

Let's talk about the size and length limits of various objects in MySQL

CSS naming conventions (rules) worth collecting Commonly used CSS naming rules

A record of a Linux server intrusion emergency response (summary)

JS realizes simple picture carousel effect

Example of using CSS to achieve floating effect when mouse moves over card