How to write post submission in javascript

In front-end development, we often need to use AJAX technology to send HTTP requests, including POST requests. This article will explain how to write a POST request in JavaScript.

1. Basic concepts of POST requests

First of all, we need to understand the basic concepts of POST requests.

In the HTTP protocol, GET and POST are both commonly used request methods. The main difference is:

1. The GET request puts the parameters directly in the URL and passes them, while the POST request Parameters are placed in the request body.
2. The amount of data transmitted by the GET request is small, generally no more than 1KB, while the POST request has no limit and can transmit a large amount of data.
3. GET requests are unsafe because the parameters in the URL can be viewed or modified by the user, while POST requests are relatively safe because the parameters are placed in the request body.

The above is the basic concept of POST request. Next, we will introduce how to write POST request in JavaScript.

2. Use the XMLHttpRequest object to send POST requests

In JavaScript, we can use the XMLHttpRequest object to send HTTP requests, including GET and POST requests.

The XMLHttpRequest object is a JavaScript API that can be used to exchange data with the server in the background. It can load data asynchronously through AJAX technology and be able to update the page without reloading the entire page.

The following are the basic steps to use the XMLHttpRequest object to send a POST request:

1. Create an XMLHttpRequest object

First, we need to create an XMLHttpRequest object. This can be achieved using the following code:

var xhr = new XMLHttpRequest();

2. Set the path and parameters of the request

Next, we need to set the path and parameters of the request. These parameters will be placed in the request body. This can be achieved using the following code:

xhr.open('POST', 'http://example.com/api', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('name=John&age=25');

In the above code, we set the request path to http://example.com/api, and the parameters are name=John and age=25.

In addition, the request header Content-type is also set to application/x-www-form-urlencoded. This is a standard POST request header, telling the server that the parameters in the request body are in key-value format.

3. Receive the data returned by the server

Finally, we need to receive the data returned by the server. This can be achieved using the following code:

xhr.onreadystatechange = function() {
  if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}

In the above code, we set the onreadystatechange event handler of XMLHttpRequest. When readyState becomes 4 (that is, the request is completed) and the status code is 200, it means that the server has responded successfully and returned the data. At this time, the data returned by the server can be obtained through xhr.responseText.

3. Use the fetch API to send a POST request

In addition to the XMLHttpRequest object, you can also use the fetch API to send a POST request. The fetch API is a standard JavaScript API for sending HTTP requests between the client and the server and encapsulating the server response using a Promise object.

The following are the basic steps to send a POST request using the fetch API:

1. Set the path and parameters of the request

First, we need to set the path of the request and parameters. This can be achieved using the following code:

fetch('http://example.com/api', {
  method: 'POST',
  headers: {
    'Content-type': 'application/x-www-form-urlencoded'
  },
  body: 'name=John&age=25'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

In the above code, we set the request path to http://example.com/api, and the parameters are name=John and age=25.

In addition, the request header Content-type is also set to application/x-www-form-urlencoded. This is a standard POST request header, telling the server that the parameters in the request body are in key-value format.

2. Receive the data returned by the server

Finally, we need to receive the data returned by the server. You can use the Promise object of the fetch API to handle it. This can be achieved using the following code:

.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

In the above code, we use the response.json() method to convert the response body into JSON format, and process the response data through the then() method, and through the catch() method Handle exceptions.

4. Summary

Through the methods introduced in this article, we can write POST requests in JavaScript, including using the XMLHttpRequest object and fetch API. These methods can load data asynchronously and update the page without reloading the entire page. You can choose the appropriate method to send POST requests based on actual needs.

The above is the detailed content of How to write post submission in javascript. For more information, please follow other related articles on the PHP Chinese website!