JavaScript implements asynchronous submission of form data

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

The effect is as follows:

First, let’s look at the HTML code:

<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>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 postgetData() {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("microsoft.XMLHTTP");
            }
            xhr.open("post", "/JQuery/getDataRequest", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            var yy = "name=" + document.getElementById("txtName")
                .value + "&sex=" + document.getElementById("cboSex")
                .value + "&address=" + document.getElementById("txtAddress").value;
            xhr.send(yy);
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    var txt = xhr.responseText;
                    console.log(txt);
                }
            }
        }

xhr.send(data); //Data to be submitted in the data form (string)

setRequestHeader syntax:

setRequestHeader(header,value): Adds an HTTP header to the request.
header: specifies the name of the header
value: specifies the value of the header
1-5 AJAX - Server Response Use the responseText or responseXML property of the XMLHttpRequest object to get the response from the server.
responseText: Get the response data in string form.
responseXML: Get the response data in XML format.
onreadystatechange event Whenever the readyState changes, the onreadystatechange event is triggered.
The readyState property holds the status information of the XMLHttpRequest. The following are three important properties of the XMLHttpRequest object:
onreadystatechange: stores a function (or function name) that is called whenever the readyState property changes.
readyState: holds the state of the XMLHttpRequest. Varies from 0 to 4.
0: Request is not initialized
1: Server connection established
2: Request received
3: Request processing
4: The request has been completed and the response is ready
status: 200: “OK” 404: Page not found In the onreadystatechange event, we specify the tasks to be performed when the server response is ready to be processed.
When readyState is equal to 4 and the status is 200, it means the response is ready:

The controller method is as follows:

Request.Form (submission method is post)

public ActionResult getDataRequest()
        {
            string name = Request.Form["name"];
            string sex = Request.Form["sex"];
            string address = Request.Form["address"];
            string str = name + "&" + sex + "&" + address + "&" + "Request can only receive post data";
            return Content(str);
        }

This will submit the data in the form.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

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
JavaScript implements asynchronous acquisition of form data

<<: How to use VirtualBox to build a local virtual machine environment on Mac

>>: Solve the problems encountered when installing mysql-8.0.11-winx64 in Windows environment