Ajax --- Send POST data to the server

POST请求方式
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
xhr.send('name-zhangsan&age=20');

Request message
The data block transferred in the process of HTTP request and response is called a message, including the data to be transmitted and some additional information. These data and information must comply with the prescribed format.

Install body-parser, enter in the root directory of the project: npm install --save body-parser

body-parse:https://blog.csdn.net/web_youth/article/details/80053187

.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8"> 
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <p>
 9         <input type="text" id="username" >
10     </p>
11     <p>
12         <input type="text" id="age">
13     </p>
14     <p>
15         <input type="button" value="提交" id='btn'>
16     </p>
17     <script type="text/javascript">
18         //获取按钮元素
19         var btn=document.getElementById('btn');
20         //Get name text box 
21          var username = document.getElementById ( ' username ' );
 22          // Get age text box 
23          var age = document.getElementById ( ' age ' );
 24          // Add click event for button 
25          btn.onclick = function () {
 26              // Create ajax object 
27              var xhr = new XMLHttpRequest ();
 28              // Get the value entered by the user in the text box 
29              var nameValue =username.value;
 30              var ageValue = age.value;
 31  
32              // splice request parameter 
33              var params = ' username = ' + nameValue + ' & age = ' + ageValue;
 34  
35              // configure Ajax object 
36              xhr.open ( ' post ' , ' http: // localhost: 3000 / post ' );
 37              
38              // Set the type of request parameter format (post request must be set) 
39              xhr.setRequestHeader ( 'Content-Type ' , ' application / x-www-form-urlencoded ' );
 40              // Send request 
41              xhr.send (params);
 42              // Get server response data 
43              xhr.onload = function () {
 44                  console.log (xhr.responseText)
 45              }
 46          }
 47      </ script > 
48  </ body > 
49  </ html >

app.js

// Introduce the express framework 
const express = require ('express' ) 

// Introduce the path processing module 
const path = require ('path' ) 
const bodyParser = require ('body-parser' ); 

// Create a web server 
const app = express (); 

// Use bodyParser.urlencoded () to make the node backend support the first kind of request body. 
App.use (bodyParser.urlencoded ()); // extended: true 
// Use bodyParser.json () to make node The second type of request body is supported in the background. 
App.use (bodyParser.json ()); 

// Static resource access server function 
app.use (express.static (path.join (__ dirname, 'public' ))) 


// correspondence 04 Pass post request parameters.html 
app.post ('/ post', (req, res) => {
    res.send (req.body); 
}) 


// Listening port 
app.listen (3000 ); 

// Console prompt output 
console.log ('Server started successfully 4')

operation result:

Ajax --- Send POST data to the server

Guess you like