Http Post and Get Web Api Calls using Vuejs
Contents
In this Post We Will Explain About is Http Post and Get Web Api Calls using Vuejs With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vuejs Restful Http Post and Get Web Api Calls Example
In this post we will show you Best way to implement Making API Calls in Vuejs using $http service, hear for Fetching Data from a Third-Party API with Vue.js and Axios with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
Vuejs web service call example
Include External Libs
//cdnjs.cloudflare.com/ajax/libs/vue/1.0.4/vue.min.js //cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
index.html
<div id="liveapp"> <div class="container"> <div class="row"> <div class="col-md-12"> <h3> Vuejs - Posting Data </h3> </div> </div> <!-- / row --> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label for="your_domain">Live Domain</label> <input type="text" class="form-control" value="" v-model="your_domain" /> </div> </div> <div class="col-sm-12"> <a href="#" class="btn btn-primary" @click="checkWebsite">Check Website</a> <span v-if="liveAjax_res">Please Wait ...</span> </div> </div> <!-- / row --> <div>Vue.js REST API Consumption with Axios</div> <div class="row" v-if="checksite"> <div class="col-sm-12"> <pre>{{ $data | json }}</pre> </div> </div> </div> <p>Live24u is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development. We deliver the useful and best tutorials for web professionals β developers, programmers, freelancers and site owners. Any visitors of this site are free to browse our tutorials, live demos and download scripts.</p> </div>
index.js
Vue.http.options.emulateJSON = true; //simple send as new Vue({ el: '#liveapp', data: { checksite: true, your_domain: '', liveAjax_res: false, postResults: [] }, methods: { checkWebsite: function() { this.liveAjax_res = true; this.$http.post('https://www.pakainfo.com/post/check', { your_domain: this.your_domain }, function (data, status, request) { this.postResults = data; this.liveAjax_res = false; }); }} }); //options get methods methods: { checkWebsite: function() { this.liveAjax_res = true; this.$http.get('https://www.pakainfo.com/get/check', { your_domain: this.your_domain }, function (data, status, request) { this.postResults = data; this.liveAjax_res = false; }); }}
You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example
Vuejs Restful Http Post and Get Web Api Calls
I hope you have Got What is Vuejs Restful Http Post and Get Web Api Calls And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.