vuejs http get and post methods PHP MySQLi
Today, We want to share with you vuejs http get and post methods PHP MySQLi.
In this post we will show you vuejs http get and post methods example | Fetching and persisting data using vue.js, hear for Fetching and persisting data using vue.js we will give you demo and example for implement.
In this post, we will learn about Vue.js Fetch Data from MySQL Database using PHP with an example.
vuejs http get and post methods example
Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.vuejs http get and post methods example
Include Vuejs Libs
first of all the include in libs/vue-resource/ and vuejs.
<a href="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js">http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js</a>
<a href="http://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js">http://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js</a>
index.html
using vuejs html all the display view using vuejs v-for to loops.and here example of the users is a one type of the object.
<!-- APP Start -->
<div id="users">
<div class="row noprint">
<div class="col-sm-12">
<div class="card-box">
<div class="btn-group row noprint" role="group">
<button type="button" class="btn btn-default">Export</button>
<button type="button" class="btn btn-default">Print</button>
<button type="button" class="btn btn-default">Something</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<table class="table m-0">
<thead>
<tr>
<th>ID</th>
<th>Image</th>
<th>Address</th>
<th>Contact</th>
<th>Department</th>
<th>Position</th>
<th>Created at</th>
<th>Updated at</th>
</tr>
</thead>
<tbody>
<tr>
<td>#{{ user.id }}</td>
<td><img src="{{ user.avatar }}" height="150px" width="150px" /></td>
<td>
<div class="row">
{{user.address_1}},<br />
{{user.address_2}},<br />
{{user.address_3}}.
</div>
<div class="row">
<div class="col-md-5">City : {{user.city}}</div>
<div class="col-md-5">State : {{user.state || "----"}}</div>
</div>
<div class="row">
<div class="col-md-5">Country : {{user.country}}</div>
<div class="col-md-5">Zip :{{user.zip}}.</div>
</div>
</td>
<td>
<div class="row">
<div class="col-md-5">Telephone : </div>
<div class="col-md-6">{{user.telephone}}</div>
</div>
<div class="row">
<div class="col-md-5">Mobile :</div>
<div class="col-md-6">{{user.mobile}}</div>
</div>
<div class="row">
<div class="col-md-5">Fax :</div>
<div class="col-md-6">{{user.fax}}</div>
</div>
</td>
<td>{{user.department}}</td>
<td>{{user.position}}</td>
<td>{{ user.created_at }}</td>
<td>{{ user.updated_at }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- end row -->
<!-- APP End -->
Processing AJAX requests from Vue.js : – Vuejs – Vue-Resource Get Request
here products is a one type of id and products type is a one type of array to store all the data.
new Vue({
el: '#products',
data: {
//debug: true,
products: []
},
ready: function() {
this.$http.get('https://infinityknow.com/modelLayerV0.1/ProductLayer/public/api/v1/product', function(data, status, request){
this.products = data;
});
}
});
Vuejs Get Method Request CORS – Laracasts
onther example of the get request to all the data display and fetch records.and simple request to data fetch using veusjs
new Vue({
el: '#users',
data: {
//debug: true,
chk:'',
users: []
},
ready: function() {
this.$http.get('https://infinityknow.com/api/v1/user/2/profile', function(data, status, request){
this.users =data;
//alert("success");
}
).error(function(data, status, request){
console.log(request);
//alert(request);
//this.chk = true;
});
},
//Export button click
methods: {
greet: function (event) {
// `this` inside methods point to the Vue instance
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){
dd='0'+dd
}
if(mm<10){
mm='0'+mm
}
var today = dd+'/'+mm+'/'+yyyy;
JSONToCSVConvertor(this.users, "Report_"+today, true);
},
print:function(event)
{
window.print();
}
}
});
vue-resource get methods example with javascript to all the data
If JSONData is not an object then JSON.parse will parse the JSON string in an Object
function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var CSV = '';
CSV += ReportTitle + '\r\n\n';
if (ShowLabel) {
var row = "";
for (var index in arrData[0]) {
row += index + ',';
}
row = row.slice(0, -1);
CSV += row + '\r\n';
}
for (var i = 0; i < arrData.length; i++) {
var row = "";
for (var index in arrData[i]) {
row += '"' + arrData[i][index] + '",';
}
row.slice(0, row.length - 1);
CSV += row + '\r\n';
}
if (CSV == '') {
alert("your data : Invalid data");
return;
}
//here fileName is a savefile_name
var fileName = "Users_";
fileName += ReportTitle.replace(/ /g,"_");
//here uri is a varibles
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
//here link is a varibles
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = fileName + ".csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
