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

Web Design: Script Materials Reconstruct User Experience

JavaScript data transmission between different pages (URL parameter acquisition)

Web Design: Script Materials Reconstruct User Experience

Summary of commonly used SQL statements for creating MySQL tables

Solution to the problem of too high penetration of input and textarea levels in WeChat applet

Incredible CSS navigation bar underline following effect

Theory: The two years of user experience

WeChat applet implements the snake game

MySQL 5.5.27 installation graphic tutorial

Detailed explanation of Vuex environment

MySQL 5.7.18 MSI Installation Graphics Tutorial

Detailed description of component-based front-end development process

Recommend

Detailed tutorial on how to delete Linux users using userdel command

Use semantic tags to write your HTML compatible with IE6,7,8

Comprehensive interpretation of MySQL master-slave replication, from principle to installation and configuration

Introduction and usage summary of React-Native screenshot component react-native-view-shot

Basic knowledge of load balancing and a simple example of load balancing using nginx

User experience of portal website redesign

When setting up Jenkins in Docker environment, the console log shows garbled Chinese characters when building tasks

A collection of common uses of HTML meta tags

Share 20 JavaScript one-line codes

Steps for Vue to use Ref to get components across levels

Introduction to HTML DOM_PowerNode Java Academy

A brief discussion on VUE uni-app's commonly used APIs

CSS3 filter code to achieve gray or black mode on web pages

Summary of scientific principles and suggestions for web design and production

JavaScript removes unnecessary properties of an object