JavaScript implements asynchronous acquisition of form data

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

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.

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

Recommend

How to use MySQL common functions to process JSON

Official documentation: JSON Functions Name Descr...

Detailed explanation of the TARGET attribute of the HTML hyperlink tag A

The hyperlink <a> tag represents a link poin...

Application of HTML and CSS in Flash

Application of HTML and CSS in Flash: I accidental...

HTML Basics: The basic structure of HTML

The basic structure of HTML hypertext documents is...

How to use mysql to complete the data generation in excel

Excel is the most commonly used tool for data ana...

Problems with index and FROM_UNIXTIME in mysql

Zero, Background I received a lot of alerts this ...

Share the 15 best HTML/CSS design and development frameworks

Professional web design is complex and time-consu...

Design Reference Beautiful and Original Blog Design

All blogs listed below are original and uniquely ...

react-beautiful-dnd implements component drag and drop function

Table of contents 1. Installation 2.APi 3. react-...

Detailed explanation of the problem of mixed use of limit and sum functions in MySQL

Preface Today, after synchronizing the order data...

Example steps for using AntV X6 with Vue.js

Table of contents 0x0 Introduction 0x1 Installati...

How to make JavaScript sleep or wait

Table of contents Overview Checking setTimeout() ...

Detailed explanation of Linux text processing tools

1. Count the number of users whose default shell ...

Overview and differences between html inline elements and html block-level elements

Block-level element features : •Always occupies a ...

JavaScript to add and delete messages on the message board

This article shares a small example of adding and...