Summary of the differences between get and post requests in Vue

Summary of the differences between get and post requests in Vue

The operating environment of this tutorial: Windows 7 system, vue 2.9.6 version, DELL G3 computer.

The difference between get and post requests in Vue

1. Get request

In a GET request, the parameters follow the URL, that is, the parameters are placed in the header. The parameters that can be transmitted are relatively small. Use params.

this.$http.get(' URL ').then(result=>{
if(result.status===0){
// Success this.list=result.message;
// Here it is assumed that the name of the list in the requested data table is message
}else{
// Failed, pop-up window alert alert("Data request failed");
}
})

2. Post request

In a POST request, the parameters are placed in the body and not following the URL. When using data, the parameter passed is larger.

this.$http.post('URL',{id:this.id},{emulateJSON:true})..then(result=>{
if(result.body.status===0){
// Success }else{
// Failed alert("Failed to obtain data!");
]
})

Knowledge point expansion:

Vue uses post/get to download and export file operations

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Front-end project download export file</title>
	</head>
	<body>
		<script>
			
		/**
		 * post method * Return: file stream * Advantage: you can modify the file name yourself for easy debugging */
	  let params = {      
			ListData : this.ListData     
		}
   	_this.$http.post(url,params,{responseType:"arraybuffer"} //Must add items).then(function(res) {
      console.log(res)
      var blob = new Blob([res.data], {type: 'application/msword; charset=utf-8'});
      var filename = "download.doc";
      var a = document.createElement('a');
      var url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = filename;
      var body = document.getElementsByTagName('body')[0];
      body.appendChild(a);
      a.click();
      body.removeChild(a);
      window.URL.revokeObjectURL(url);
		}
		
		/**
		 * get method * Return: file stream * Advantages: nothing needs to be processed in the foreground, all processing is done in the background * Disadvantages: unchanged debugging (need to ensure the stability of the background interface)
		 */
		let exportURL = `api/sysLog/export?content=${content}&ip=${ip}`;
   	window.open(exportURL, "_blank")
		
		</script>
	</body>
</html>

This concludes this article about the differences between get and post requests in vue. For more information about the differences between get and post requests in vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Solve the cross-domain problem of get and post requests of vue $http
  • Vue uses post/get to download and export file operations
  • Vue basics: using get, post, and jsonp to implement interactive functions
  • Vue axios global interception get request, post request, configuration request example code
  • Vue axios data request get, post method and example detailed explanation
  • Vuejs uses axios asynchronous access to use get and post examples

<<:  40 fonts recommended for famous website logos

>>:  Comprehensive summary of mysql functions

Recommend

Clean XHTML syntax

Writing XHTML demands a clean HTML syntax. Writing...

CentOS 8 custom directory installation nginx (tutorial details)

1. Install tools and libraries # PCRE is a Perl l...

WHMCS V7.4.2 Graphical Installation Tutorial

1. Introduction WHMCS provides an all-in-one solu...

Solve the abnormal error when building vue environment with webpack

Table of contents First, configure package.json T...

Introduction to the use of this in HTML tags

For example: Copy code The code is as follows: <...

Linux CentOS MySQL database installation and configuration tutorial

Notes on installing MySQL database, share with ev...

HTML 5 Preview

<br />Original: http://www.alistapart.com/ar...

React Hooks Usage Examples

Table of contents A simple component example More...

Summary of the use of element's form elements

There are many form elements. Here is a brief sum...

JS Decorator Pattern and TypeScript Decorators

Table of contents Introduction to the Decorator P...

Example of using CASE WHEN in MySQL sorting

Preface In a previous project, the CASE WHEN sort...

JavaScript implements bidirectional linked list process analysis

Table of contents 1. What is a doubly linked list...

How to install a virtual machine with Windows services on Mac

1. Download the virtual machine Official download...