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

Summary of some common writing methods that cause MySQL index failure

Recommend

Synology NAS uses Docker container to build KMS activation server to activate Windows system and office (operation steps)

Preface The Windows system that can be activated ...

JavaScript data transmission between different pages (URL parameter acquisition)

Summary of some common writing methods that cause MySQL index failure

Detailed explanation of the deployment process of Docker Alibaba Cloud RocketMQ 4.5.1

React uses antd's upload component to implement the file form submission function (complete code)

Windows Service 2016 Datacenter\Stand\Embedded Activation Method (2021)

HTTP and HTTP Collaboration Web Server Access Flow Diagram

JavaScript to achieve click image flip effect

Docker View Process, Memory, and Cup Consumption

Discussion on Web Imitation and Plagiarism

Three ways to delete a table in MySQL (summary)

Detailed explanation of several horizontal and vertical centering methods in HTML (Basics)

Recommend

Synology NAS uses Docker container to build KMS activation server to activate Windows system and office (operation steps)

A brief analysis of the principles of NFS servers and the steps for building, configuring and deploying them

Detailed explanation of the use of HTML canvas and page storage technology in JavaScript

Detailed explanation of the process of building an MQTT server using Docker

Storage engine and log description based on MySQL (comprehensive explanation)

Use of Linux file command

Native JS to implement paging click control

Vue implements a search box with a magnifying glass

Solution to index failure in MySQL due to different field character sets

Vue code highlighting plug-in comprehensive comparison and evaluation

An article to solve the echarts map carousel highlight

Two methods to disable form controls in HTML: readonly and disabled

CSS3 realizes the effect of triangle continuous enlargement

Example of using Nginx reverse proxy to go-fastdfs

How to convert a column of comma-separated values into columns in MySQL