Keywords: HTML Forms | Query Strings | JavaScript | GET Method | Inter-page Data Transfer
Abstract: This article provides a comprehensive exploration of passing form data between HTML pages, focusing on the technical solution using GET method and query strings. It analyzes the fundamental principles of form submission, offers complete JavaScript code examples for parsing URL parameters, and compares the advantages and disadvantages of different data transfer methods. Through practical case studies, it demonstrates the data transfer process from form.html to display.html, helping developers understand the core mechanisms of client-side data transmission.
Fundamental Principles of Form Data Transfer
In web development, transferring form data between pages is a common requirement. When users fill out and submit a form on one HTML page, the data needs to be passed to another page for processing or display. According to HTTP protocol design, this data transfer can be implemented through various methods, with query strings being the most straightforward solution that doesn't require server-side support.
GET Method and Query Strings
HTML forms use the GET method by default for data submission, even when the method attribute isn't explicitly specified. The characteristic of the GET method is that it appends form data as a query string to the target URL. The query string begins with a question mark and contains a series of name-value pairs, separated by ampersand symbols.
Consider the following form definition:
<form action="display.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>When a user enters a serial number "ABC123" in this form and submits it, the browser redirects the user to a URL similar to:
http://www.example.com/display.html?serialNumber=ABC123JavaScript Query String Parsing
In the target page display.html, JavaScript is required to access and parse the query string from the URL. The browser provides the window.location.search property to retrieve the complete query string portion.
The basic parsing approach is as follows:
<script>
function getQueryParam(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
}
// Retrieve and display serial number
const serialNumber = getQueryParam('serialNumber');
if (serialNumber) {
document.getElementById('write').innerHTML =
'The serial number is: ' + serialNumber;
}
</script>Complete Implementation Solution
Combining with the original HTML structure from the problem, the complete display.html page implementation is as follows:
<body>
<div id="write">
<p>The serial number is: </p>
</div>
<script>
// Using modern URLSearchParams API to parse query parameters
function show() {
const urlParams = new URLSearchParams(window.location.search);
const serialNumber = urlParams.get('serialNumber');
if (serialNumber) {
document.getElementById("write").innerHTML =
'The serial number is: ' + serialNumber;
} else {
document.getElementById("write").innerHTML =
'No serial number provided';
}
}
// Automatically execute after page loads
document.addEventListener('DOMContentLoaded', show);
</script>
</body>Alternative Approach: Traditional Parsing Method
For older browsers that don't support URLSearchParams, traditional string parsing methods can be used:
<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
vars[key] = value;
});
return vars;
}
function show() {
var params = getUrlVars();
var serialNumber = params['serialNumber'];
if (serialNumber) {
document.getElementById("write").innerHTML =
'The serial number is: ' + serialNumber;
}
}
</script>Security Considerations and Limitations
While using query strings for data transfer is simple and convenient, it has several limitations:
- Data Exposure: All parameters are visible in the URL, making it unsuitable for sensitive information
- Length Restrictions: URLs have length limitations that vary across different browsers
- Encoding Issues: Special characters require proper encoding, otherwise parsing errors may occur
For sensitive data or large amounts of data transfer, it's recommended to use the POST method combined with server-side processing, or consider client-side storage solutions like Web Storage API or Session Storage.
Practical Application Recommendations
In real-world projects, it's advisable to:
- Validate and sanitize retrieved parameters to prevent XSS attacks
- Consider browser compatibility and provide fallback solutions
- For complex data structures, consider using JSON encoding
- Use the more secure POST method when possible
By properly utilizing query string technology, developers can implement data transfer between pages in a pure client-side environment, providing better user experiences for web applications.