Detailed VUE and backend data interaction (Ajax): Vue-resource

I don’t understand Vue and backend data interactions. Search for many about Vue and backend data interactions, let me recording, friends who need to understand can be referred to. I hope this article is helpful to you.

must introduce a library: Vue-resource

1. Get normal text data

such as: a.txt:

         Window.onLoad = function () {var VM = New Vue ({EL: '# Box', Data: {msg: 'Hello World!',}, Methods: {get: function () {// Send GET request this. $ Http.get ('a.txt'). Then (Function (RES) {Alert (res. body);}, function () {console.log ('request failure handler) };}}});}        The code is implemented, click onThe button, send the GET request, and then take the data Alert. 
2.GET Send Data to the rear end
Assume that the rear end address is GET.PHP, The code is as follows:


详解vue与后端数据交互(ajax):vue-resource

this. $ Http.get (‘ Get.php ‘, {A: 1, B: 2}). THEN (Function (res. body);}, function (res) {console.log (res.status);};
This. $ Http.get (‘get.php’, jsondata) The second parameter is data transmitted to the backend.

3.POST request

 POST sends data to the rear end, requiring a third parameter: {emulatejson: true}  <?php
$a = $_GET['a'];
$b = $_GET['b'];

$c = $a + $b;

die($c);
 
THIS. $ Http.post (‘post.php’, {A: 1, B: 2}, {emulatejson: true}). THEN (FUNCTION (RES) {Alert (RES. Body);}, function (res.status);};
   4.jsonp 

This is 360 Search JSONP interface: https://sug.so.360.cn/suggest?callback =suggest_so&word=a


We look at Vue- How to use JSONP

 . $ http.jsonp ('https://sug.so.360.cn/suggest', {Word: 'a'}, {JSONP: 'Callback'}. Then (Function (RES) {Console.log (res. 4};} (res.status);};  

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment