The content-Type and POST are used in combination for front-end requests

  • Content-type can be uppercase or lowercase

  • Content-type is set in the headers object

   headers: {
      'Content-Type': 'application/json'
   }
Copy the code

  • The Content-Type setting has nothing to do with GET requests and is generally associated with POST requests

  • Content-type defaults to ‘Application/X-www-form-urlencoded’ when submitting with form forms. Content-type defaults to ‘application/json’ when submitting with XHR

  • Content-type :’multipart/form-data’ Is used for uploading files and submitting forms multipart. The data format is the same when submitting in XHR form as when submitting in Application/JSON

  • When content-type is ‘application/x-www-form-urlencoded’, the submission mode of data is “a=123&b=456&c=[1,2,3]”. But we usually write it in object form, so we need to convert it to ampersand and that’s why we need QS serialization. So that the background can properly parse the submitted data

 {a:123.b:456.c: [1.2.3]}=>a=123&b=456&c=[1.2.3]
Copy the code
  • If the content-type is ‘application/json’, it must be submitted as JSON
 body: JSON.stringify({ a: 123.b: [1.2.3]})// or
 body: '{"a":123,"b":456}'
Copy the code

Content-type specifies the Type of output file for a back-end response

The following attributes are common

‘text/ HTML ‘// Specifies the HTML file

The ‘text/plain’ // HTML source code is displayed on the page

‘text/ CSS ‘// Specifies the CSS file

‘image/ JPG ‘// Is used to specify the image format

‘aplication/javascript’ // Specifies THE JS file

‘application/json’ // used to specify the data format of the request interface

They are often combined with ‘charset= UTF-8 ‘e.g.’ content-type ‘: ‘text/ HTML; Charset = “utf-8” ‘. Otherwise, garbled characters may be generated during parsing

fs.readFile('index.html'.function(err, data) {

  if (err) {
      res.writeHeader(404, {
          'Content-Type': 'text/html; charset="utf-8"' // If res.write is used, charset=" utF-8 "will be added, otherwise garbled characters will be generated
      })
      res.write('
404
 The page you are looking for was eaten by LEO 
');  // Content-type can be parsed directly because it is set to text/ HTML
      res.end()
  } else {
      res.writeHeader(200, {
          'Content-Type': 'text/html'
      })
      res.end(data)
  }

})     
Copy the code

Submit test results as a form

When encType =”application/x-www-form-urlencoded” or encType =”multipart/form-data” the submitted content is the same, there is no difference

Data after submission

------WebKitFormBoundaryAehrCayXmChOAGwO Content-Disposition: form-data; Name = "name" xiao Ming -- -- -- -- -- - the WebKitFormBoundaryAehrCayXmChOAGwO Content - Disposition: the form - data; name="password" 123456 ------WebKitFormBoundaryAehrCayXmChOAGwO Content-Disposition: form-data; name="file"; filename="picture.jpg" Content-Type: image/jpeg ------WebKitFormBoundaryAehrCayXmChOAGwO--Copy the code

First, a boundary was generated to divide different fields. In order to avoid repetition with the text, the boundary was very long and complicated. Then the content-Type indicates that the data is encoded by form-data and what is the Content of boundary in this request. The message body is divided into several parts with similar structure according to the number of fields. Each part starts with –boundary, followed by the content description information and then the carriage return. If you are transferring a file, also include the filename and file type information. I don’t know why binary content is not generated. The message body ends with a –boundary– identifier.This method is commonly used for uploading files and is well supported by the major server languages.

As more and more Web sites, especially WebApps, use Ajax for all data interaction, we can define new ways of submitting data to make development easier

Differences between a Form submission and an XHR submission

  • Form submission has no cross-domain issues, XHR submission has cross-domain issues
  • The form form specifies encType =’multipart/form-data’ to upload large files
  • You can use e.preventDefault() to disable reloading. If the form is submitted with HTTPS, the new page will be reloaded. If the form is not submitted with HTTPS, the action path will be added to the route
  • There are three submission methods commonly used by XHR. An application/ JSON submission is not much different from a multipart/form-data submission (often in the back end), and the submission format is similar. There are only two ways to submit a form form. There is not much difference between the two methods.

Use scenarios for new formDate()

  • You can pass the output as key-value pairs for the Name attribute in the form form
  • Can handle file forms and new blob() objects
  • The Symbol. Iterator method is deployed on the prototype and points to entries so it can be iterated for

Pit: Data appended by the append() method cannot be submitted to the server using XHR, but can be submitted using fetch(). The workaround is to manually add using the for of loop

   let params = {}
   for (let [key, value] of formData) {
       params[key] = value
   }
Copy the code

View parsed View parsed

View source Displays the source

View URL encoded Views the encoded URL

View decoded View decoded

Form Data Indicates table Data

Request Payload Indicates the request payload

The general routine of

Query String Parameters Query string parameters

Refer to the article

There are four common ways to submit data through POST

The correct way to handle POST requests in Node

The NodeJS HTTP server gets the POST request data