JavaScript implements asynchronous submission of form data

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

Recommend

Vue realizes the percentage bar effect

This article shares the specific code of Vue to r...

Detailed explanation of MySQL DEFINER usage

Table of contents Preface: 1.Brief introduction t...

Vue must learn knowledge points: the use of forEach()

Preface In front-end development, we often encoun...

This article will show you the basics of JavaScript: deep copy and shallow copy

Table of contents Shallow copy Deep Copy Replenis...

Database index knowledge points summary

Table of contents First Look Index The concept of...

jQuery realizes the picture following effect

This article shares the specific code of jQuery t...

Analysis of the causes of accidents caused by Unicode signature BOM

Maybe you are using include files here, which is u...

Java example code to generate random characters

Sample code: import java.util.Random; import java...

SVG button example code based on CSS animation

The specific code is as follows: <a href="...

Docker installation of MySQL (8 and 5.7)

This article will introduce how to use Docker to ...

How to install babel using npm in vscode

Preface The previous article introduced the insta...

How to write the introduction content of the About page of the website

All websites, whether official, e-commerce, socia...

HTML table markup tutorial (15): table title

<br />This tag can be used to directly add a...