JavaScript implements asynchronous acquisition of form data

This article example shares the specific code for JavaScript to achieve asynchronous acquisition of form data for your reference. The specific content is as follows

In the previous article, we talked about using JavaScript to asynchronously submit data in the form. Today, let’s talk about using JavaScript to asynchronously obtain data in the form. Without further ado, let’s continue reading.

The effect diagram is as follows:

Click Get Data to get the data as shown in the figure below.

The HTML part is as follows:

 <div class="container">
       <form class="form-horizontal" onsubmit="return false;">
           <div class="form-group">
               <label class="control-label col-md-3">Name:</label>
               <div class="col-md-4">
                   <input type="type" name="txtname" value=" " class="form-control" id="txtName"/>
               </div>
           </div>
           <div class="form-group">
               <label class="control-label col-md-3">Gender:</label>
               <div class="col-md-4">
                   <select class="form-control" name="cboSex" id="cboSex">
                       <option>--Please select</option>
                       <option>Male</option>
                       <option>Female</option>
                   </select>
               </div>
           </div>
           <div class="form-group">
               <label class="control-label col-md-3">Address:</label>
               <div class="col-md-4">
                   <textarea class="form-control" name="txtAddress" id="txtAddress"></textarea>
               </div>
           </div>
           <div class="form-group">
               <button class="btn btn-primary col-md-offset-4" onclick="getVal()">Get the value of the form</button>
               <button class="btn btn-primary" onclick="postgetData()">Submit data</button>
               <button class="btn btn-success" onclick="getData()">Get data</button>
           </div>
       </form>
</div>

The JavaScript part is as follows:

 function getData() {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = ActiveXObject("microsoft.XMLHTTP");
            }
            xhr.open("post", "/JQuery/getInformation", true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    var txt = xhr.responseText; //Get the return value of xhr var obj = JSON.parse(txt); //Parse the string into a js object document.getElementById("txtName").value = obj.name;
                    document.getElementById("cboSex").value = obj.sex;
                    document.getElementById("txtAddress").value = obj.address;
                }
            }
        }

Send a request to the server

To send a request to the server, we use the open() and send() methods of the XMLHttpRequest object:
open(method,url,async) specifies the type of request, the URL, and whether to process the request asynchronously.

1. What is synchronous and asynchronous?

Synchronization means that when a process executes a request, if the request takes some time to return information, the process will wait until it receives the return information before continuing to execute.
Asynchronous means that the process does not need to wait all the time, but continues to execute the following operations regardless of the status of other processes.
When a message is returned, the system will notify the process to handle it, which can improve execution efficiency.

Asynchronous implementation:

1. Use HTML and CSS to implement pages and express information
2. Use XMLHttpRequest and web server to exchange data asynchronously
3. Use JavaScript to operate DOM to achieve dynamic partial refresh

2. What is the XMLHttpRequest object?

The XMLHttpRequest object is used to exchange data with the server in the background (for details, see w3c)
Create an XMLHttpRequest object. All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have built-in
XMLHttpRequest object.
The syntax for creating an XMLHttpRequest object is:

var xhr = new XMLHttpRequest();

Older versions of Internet Explorer (IE5 and IE6) use the ActiveXObject object:

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

To work with all modern browsers, including IE5 and IE6, check whether the browser supports the XMLHttpRequest object. If supported, an XMLHttpRequest object is created. If not supported, create an ActiveXObject:

var xhr;
     if (window.XMLHttpRequest) {
                  // code for IE7+, Firefox, Chrome, Opera, Safari
                    xhr = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }

3. Send a request to the server

The controller method is as follows:

public ActionResult getInformation()
        {
            string str = "{\"name\":\"三三\",\"sex\":\"男\",\"address\":\"南城区\"}";
            return Content(str);
        }

Summarize

The above is what we are going to talk about today. This article only briefly introduces the use of asynchronous acquisition of form data.

You may also be interested in:

JavaScript implements asynchronous submission of form data
Detailed explanation of jquery.form.js asynchronous form submission
Extjs form input box asynchronous verification plug-in implementation method
A simple example of using pure javascript ajax to implement asynchronous form submission in php
JavaScript rewrites the asynchronous validation form into a synchronous form
Javascript asynchronous form submission, image upload, compatible with asynchronous simulation ajax technology

<<: In-depth explanation of Session and Cookie in Tomcat

>>: Install Percona Server+MySQL on CentOS 7