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:


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;

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

This is 360 Search JSONP interface: =suggest_so&word=a

We look at Vue- How to use JSONP

 . $ http.jsonp ('', {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
Just support it if you like
comment Grab the couch

Please log in to comment