Home > Article > Web Front-end > 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:
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:
First, we need to create an XMLHttpRequest object. This can be achieved using the following code:
var xhr = new XMLHttpRequest();
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.
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:
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.
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!