Ajax Http with VueJS and PHP

Ajax Http with VueJS and PHP

In this Post We Will Explain About is Ajax Http with VueJS and PHP With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to How to Post Data using VueJS Example

In this post we will show you Best way to implement How to get data from MySQL with VueJS – PHP, hear for Calling PHP with VueJS AJAX and JavaScript with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

List of shortcut methods:

  • get(url, [config])
  • head(url, [config])
  • delete(url, [config])
  • jsonp(url, [config])
  • post(url, [body], [config])
  • put(url, [body], [config])
  • patch(url, [body], [config])

Vuejs ajax call

   students: []

     fetchStudents: function(){
                this.$set('students', results.data);
          }, function(results){
              // error callback

 ready: function(){

Create a folder data Like as a ‘php’ and make a simple file ‘do_post_data.php’ under this source code.

Also Read :   Create Google Hybrid Maps View GPS Hybrid

/* php/do_post_data.php */

header('Content-type: application/json');
header('Access-Control-Allow-Headers: Content-Type');
header("Access-Control-Allow-Origin: *");

$inputJSON = file_get_contents('php://input');
$input = json_decode($inputJSON, TRUE);

$name = $input['name'];
$studentemail = $input['studentemail'];
$comments = $input['comments'];
$liveno = $input['liveno'];

$result['comments'] = '';
$result['error']  = false;

  $result['comments']  = "Posted Values => ".$name."-".$studentemail."-".$comments."-".$liveno;
  $result['error']  = false;
else {
  $result['error']  = 'Student Form submission failed.';

echo json_encode($result);


We have make a vuejs component called Like as a ‘Form.Vue’ with above pieces. now is the complete full source code, vuejs Form Validation with Vue.js


    <div id="app" class="container">
      <div class="row justify-content-center">
        <div class="col-md-6" v-if="!dataPostStatus">
          <form id="form" method="post" v-on:submit.prevent="validateForm">
            <div class="lst form-group live24u" v-bind:class="{ 'has-warning': myfrmData && removeNm }">
              <label class="control-label" for="name">Name</label>
              <input id="name" name="name" class="form-control" type="text" v-model="name">
              <span id="helpBlock" class="help-block" v-if="myfrmData && removeNm">This field is required.</span>
            <div class="lst form-group live24u" v-bind:class="{ 'has-warning': myfrmData && wrongNumber }">
              <label class="control-label" for="liveno">Enter a liveno between 1 and 10</label>
              <input id="liveno" name="liveno" class="form-control" type="text" v-model="liveno">
              <span id="helpBlock" class="help-block" v-if="myfrmData && wrongNumber">Create sure It is a liveno between 1 and 10.</span>

             <div class="lst form-group live24u" v-bind:class="{ 'has-warning': myfrmData && missingEmail }">
              <label class="control-label" for="name">Email</label>
              <input id="studentemail" name="studentemail" class="form-control" type="text" v-model="studentemail">
              <span id="helpBlock" class="help-block" v-if="myfrmData && missingEmail">Email is invalid.</span>

             <div class="lst form-group live24u" v-bind:class="{ 'has-warning': myfrmData && msgofmiss }">
              <label class="control-label" for="comments">Enter a Message</label>
              <textarea  name="comments" class="form-control" type="text" v-model="comments"></textarea>
              <span id="helpBlock" class="help-block" v-if="myfrmData && msgofmiss">This field is required.</span>
            <button class="btn btn-success">Submit</button>

         <div class="col-md-8" v-if="dataPostStatus">

           <h1>The form is submitted successfully.</h1>

      </div><!-- /row -->

    </div><!-- /container -->


import axios from 'axios'
  export default {   
    data () {
      return {
        name: '',
        studentemail: '',
        comments: '',
        liveno: '',
        myfrmData: false,
        dataPostStatus: false
    computed: {
        removeNm: function () { return this.name === '' },
        msgofmiss: function () { return this.comments === '' },
        missingEmail: function () {
          return (
            this.isEmail(this.studentemail) === null)
        wrongNumber: function () {
          return (
            this.isNumeric(this.liveno) === false ||
            this.liveno < 1 ||
            this.liveno > 10
  methods: {
     isNumeric: function (n) {
      return !isNaN(parseFloat(n)) && isFinite(n);
    isEmail: ( str ) => {      
      let regexp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/     
      return str.match(regexp);
    validateForm: function (event) {
      this.myfrmData = true;
      if (this.removeNm || this.wrongNumber || this.msgofmiss || this.missingEmail) {
      } else {
    onSubmit () {
       if (process.env.NODE_ENV === 'development') {
                axios.defaults.baseURL = 'http://localhost:8888/live24u/php'

       axios.post('do_post_data.php', {
                'name': this.name,
                'studentemail': this.studentemail,
                'comments': this.comments,
                'liveno': this.liveno               
            }).then(results => {
                if (results.data.error) {
                    console.log('error', results.data.error)
                } else {
                    this.dataPostStatus = true
                    console.log('success', results.data.comments)                   
            }).catch(error => {

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read :   AngularJS File Upload using PHP MySQLi


I hope you have Got What is PHP, MySql, Jquery, VueJS, Ajax, Codeigniter Tutorial And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.