Complete Guide to Form Submission Without Page Reload Using AJAX Technology

Problem Background and Challenges

In traditional web development, form submissions typically cause complete page refreshes, which not only affect user experience but also reset page states. As mentioned by the user, when attempting to execute JavaScript functions to update page content upon form submission, the function results are reset due to page refresh, causing a "flashing" phenomenon.

In the original code, returning false in the onsubmit event prevents the default submission behavior, but it also prevents normal form data submission. This contradiction is precisely the core problem that AJAX technology aims to solve.

AJAX Technology Principles

AJAX (Asynchronous JavaScript and XML) allows web applications to communicate asynchronously with servers without reloading the entire page. This technology is implemented through the XMLHttpRequest object, which can send HTTP requests in the background and handle responses, enabling partial page updates.

Key advantages include:

• Avoiding complete page refreshes, enhancing user experience
• Supporting asynchronous operations without blocking the user interface
• Enabling dynamic updates to specific page sections
• Reducing server load and network bandwidth consumption

Native JavaScript Implementation

Here is a complete implementation based on XMLHttpRequest:

function submitForm() {
    // Create XMLHttpRequest object
    var http = new XMLHttpRequest();
    
    // Get form data
    var searchValue = document.getElementById('search').value;
    
    // Configure request parameters
    http.open("POST", "process.php", true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    
    // Prepare data to send
    var params = "search=" + encodeURIComponent(searchValue);
    
    // Send request
    http.send(params);
    
    // Handle response
    http.onload = function() {
        if (http.status === 200) {
            // Success response handling
            updateTable();
            console.log("Form submission successful: " + http.responseText);
        } else {
            // Error handling
            console.error("Request failed with status: " + http.status);
        }
    };
    
    // Error handling
    http.onerror = function() {
        console.error("Network error");
    };
}

// Modify form event handling
<form action="" method="get" onsubmit="submitForm(); return false;">
    <input id="search" name="search" type="text">
    <input type="submit" value="Search">
</form>

Code Analysis and Optimization

Key improvements in the above code include:

• Using encodeURIComponent() to encode parameters, preventing errors caused by special characters
• Adding comprehensive error handling mechanisms, including HTTP status code checks and network error handling
• Calling the updateTable() function to update page content after successful responses
• Preventing default form submission behavior with return false while completing data submission via AJAX

jQuery Implementation Solution

As a supplementary solution, jQuery provides a more concise AJAX implementation:

$("#submitButton").click(function(event) {
    event.preventDefault();
    
    $.ajax({
        type: "POST",
        url: "process.php",
        data: $("#searchForm").serialize(),
        success: function(response) {
            updateTable();
            console.log("Submission successful: " + response);
        },
        error: function(xhr, status, error) {
            console.error("Submission failed: " + error);
        }
    });
});

Performance and Compatibility Considerations

When choosing an implementation solution, consider:

• Native JavaScript solutions offer better performance and fewer dependencies but require more code
• jQuery solutions are more concise but require additional library files
• Modern browsers have excellent support for XMLHttpRequest, making compatibility less of an issue
• For complex applications, consider modern alternatives like the fetch API

Best Practice Recommendations

In actual development, it is recommended to:

• Always validate and sanitize user input
• Provide clear user feedback, such as form submission status indicators
• Consider network latency and timeout handling
• Use HTTPS protocol for sensitive data
• Perform corresponding data validation and processing on the server side