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

Common rule priority issues of Nginx location

Table of contents 1. Location / Matching 2. Locat...

Detailed explanation of two quick ways to write console.log in vscode

(I) Method 1: Define it in advance directly in th...

What are the advantages of using B+Tree as an index in MySQL?

Table of contents Why do databases need indexes? ...

JavaScript implements page scrolling animation

Table of contents Create a layout Add CSS styles ...

HTML tag ID can be a variable

<table id=" <%=var1%>">, the...

DOCTYPE Document Type Declaration (Must-Read for Web Page Lovers)

DOCTYPE DECLARATION At the top of every page you w...

MySQL stored functions detailed introduction

Table of contents 1. Create a stored function 2. ...

How to create a child process in nodejs

Table of contents Introduction Child Process Crea...

Vue3.0+vite2 implements dynamic asynchronous component lazy loading

Table of contents Create a Vite project Creating ...

Detailed explanation of MySQL three-value logic and NULL

Table of contents What is NULL Two kinds of NULL ...

A brief analysis of Linux resolv.conf

1. Introduction resolv.conf is the configuration ...

Share 8 CSS tools to improve web design

When one needs to edit or modify the website desi...

Solve the problem of spring boot + jar packaging deployment tomcat 404 error

1. Spring boot does not support jsp jar package, ...

Some problems you may encounter when installing MySQL

Question 1: When entering net start mysql during ...