Formular mit VueJs und AJAX in Laravel senden 5.1

Ich versuche, ein Formular mit AJAX und VueJs zu senden. Aber irgendwie gelingt es mir nicht. Ich bekomme immer ein leeres Illuminate\Http\Request Objekt.Formular mit VueJs und AJAX in Laravel senden 5.1

Die Klinge Datei:

<body> 
    <div class="container"> 
     <generate-admin></generate-admin> 
    </div> 

    <script src="https:http://code.jquery.com/jquery.js"></script> 
    <script src="{{ url('/js/main.js') }}"></script> 
</body>

die Komponente:

<template> 
    <form id="createAdministrator" @submit.prevent="createAdministrator"> 

     <div class="form-group"> 

      <input type="text" 
        name="username" 
        id="txtUserName" 
        placeholder="Username" 
        autocomplete="off" 
        v-model="username" 
      /> 

     </div> 

     <input type="submit" value="Submit"> 

    </form> 
</template> 

<script> 
    export default { 
     data: function() { 
      return { 
       username: '' 
      } 
     }, 

     methods: { 
      createAdministrator: function() { 
       formContents = jQuery("#createAdministrator").serialize(); 

       this.$http.post('/admin', formContents).then(function(response, status, request) { 
        console.log(response); 
       }, function() { 
        console.log('failed'); 
       }); 
      } 
     } 
    } 
</script>

main.js

import Vue from 'vue'; 
import GenerateAdmin from './components/GenerateAdmin.vue'; 

var VueResource = require('vue-resource') 
Vue.use(VueResource); 

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content'); 
Vue.http.options.emulateJSON = true; 

new Vue({ 
    el: 'body', 

    components: { GenerateAdmin } 
});

gulpfile.js

var elixir = require('laravel-elixir'); 

require('laravel-elixir-vueify'); 

elixir(function(mix) { 
    mix.browserify('main.js'); 
});

routes.php

Route::get('/admin/create', function() { 
    return view('admin.create'); 
}); 

Route::post('/admin', function(Request $request) { 
    // returns an empty object. 
    return response(['results' => $request]); 
}); 

Route::get('/', function() { 
    return view('welcome'); 
});

Was ich im Gegenzug ist:

"{"results":{"attributes":{},"request":{},"query":{},"server":{},"files":{},"cookies":{},"headers":{}}}"

Als ich die Anfrage-Payload Abschnitt Netzwerk Tab in Chrome überprüfen. Ich sehe, dass das Formular mit den Daten, die ich in das Textfeld oben geschrieben habe, erfolgreich eingereicht wurde.

Warum passiert das? Bitte führen Sie mich, wo ich den Fehler gemacht habe?

UPDATE 1:

Ich war oben mit dem Code Versuch und Irrtum zu spielen. Und ich entfernte den Namensraum Illuminate\Http\Request und entfernte auch das Argument Request $request von der post Route. Und den Übergangsparameter von String auf Objekt geändert.

So tun, hat die Arbeit für mich, die ich gesucht. Warum ich nicht weiß. Ich suche immer noch jemanden, der mir das erklären kann.

Warum das Hinzufügen des Namespace Iluminate\Http\Request in routes.php Datei funktionierte nicht, wie ich es erwartet hatte und es entfernt die Aufgabe?

Kann mir jemand sagen, warum es früher nicht geklappt hat? Jede Art von Hilfe wird sehr geschätzt.

P. S .: Ich begann vor kurzem VueJs Komponenten zu lernen.

Quelle

2016-06-29 Saiyan Prince

Ich habe noch nie jQuery(). Serialize() versucht, stattdessen bevorzuge ich ein JSON-Datenobjekt in Vue-Komponente und dann senden Sie dieses Datenobjekt mit der Post-Anfrage. Versuchen Sie in Ihrem 'createAdministrator()' 'this.username' als Anfragedaten zu senden und sehen Sie, was Sie bekommen. für ex: 'createAdministrator() {this. $ http.post ('/ admin', this.username) .dann (response => {console.log (Antwort);})' – Donkarnash

@Donkarnash Nö .. Das auch nicht 't hat gearbeitet .. Selbe Sache ist passiert .. Ein leeres Objekt zurückgegeben .. –

Nur eine Ahnung, habe es nicht ausprobiert. Aber liefert nicht .serialize() einen String wie: "username = WhateverTheInputIs"? Ich denke, was Sie wollen, ist ein Objekt wie: {'Benutzername': WhateverTheInputIs}. – Liren

Alle Variablen ($ attributes, $ request, $ query usw.) auf Anfrage und SymfonyRequest Klassen sind geschützt, da keine Klasse __toString implementiert, php tut sein Bestes, um Ihnen zu geben was es kann.

Wenn Sie jeden Wert sehen müssen, müssen Sie den richtigen Getter aufrufen.Etwas wie:

Route::post('/admin', function(Request $request) {  
    return response(['server' => $request->server(), 'form'=>$request->all()]); 
});

Quelle

2016-06-29 12:00:21

'$ request-> all()' gibt mir ein leeres Array .. –

Untersuchen Sie Ihren JS-Code, überprüfen Sie Anfragen im Browser und überprüfen Sie die Website von Laravel hier https://laravel.com/docs/5.1/requests#retrieving-input –

Als allgemeine Praxis, die ich folge, jede Form Daten, die weitergegeben werden muss, um den Laravel Controller als JSON-Objekt von vue Frontend übergeben wird. Dann werden in Laravel-Controller (Route mit einer Closure-Funktion in Ihrem Fall) die Werte aus dem empfangenen JSON-Objekt mit $request->get('key') abgerufen.
Also in Ihrem Fall könnte der Komponentencode

<template> 
 
    <form id="createAdministrator" @submit.prevent="createAdministrator"> 
 

 
     <div class="form-group"> 
 

 
      <input type="text" 
 
        name="username" 
 
        id="txtUserName" 
 
        placeholder="Username" 
 
        autocomplete="off" 
 
        v-model="username" 
 
      /> 
 

 
     </div> 
 

 
     <input type="submit" value="Submit"> 
 

 
    </form> 
 
</template> 
 

 
<script> 
 
    export default{ 
 
     template:require('./generate-admin-template.html'), 
 
     data() { 
 
      return { 
 
       username: '' 
 
      } 
 
     }, 
 
     computed:{ 
 
     formData(){ 
 
      return { 
 
      username:this.username 
 
      } 
 
     } 
 
     }, 
 
     methods: { 
 
      createAdministrator: function() { 
 
       this.$http.post('/admin', this.formData).then(function(response) { 
 
        console.log(response); 
 
       }, function() { 
 
        console.log('failed'); 
 
       }); 
 
      } 
 
     } 
 
    } 
 
</script>

werden dann in Ihrer routes.php Datei

<?php 
use Illuminate\Http\Request; 

/* 
|-------------------------------------------------------------------------- 
| Application Routes 
|-------------------------------------------------------------------------- 
| 
| Here is where you can register all of the routes for an application. 
| It's a breeze. Simply tell Laravel the URIs it should respond to 
| and give it the controller to call when that URI is requested. 
| 
*/ 

Route::get('/', function() { 
    return view('welcome'); 
}); 

Route::get('/admin/create', function() { 
    return view('admin.create'); 
}); 

Route::post('/admin', function (Request $request) { 
    return response(['results' => $request->get('username')]); 
});

Ich denke, die Illuminate\Http\Request Instanz ein $request - Collection kehrt so müssen wir den Zugang Werte unter Verwendung Methods available on Collections.
Ich habe den obigen Code zusammen mit Ihrem Code für main.js und '/admin/create' getestet.
Noch eine Sache - Ich denke, wenn Sie serialisierte Formulardaten an den Controller senden, dann muss es in der Steuerung deserialisiert werden, um Objekt oder Array mit $key=>$value Paaren zu erhalten, um das Abrufen der erforderlichen Daten zu erleichtern.

Quelle

2016-07-01 16:19:15 Donkarnash

Scheint du vue.js zu meistern. Ich brauche deine Hilfe. Schau hier: http://stackoverflow.com/questions/41843823/how-to-display-button-link-with-vue-js –

Formular mit VueJs und AJAX in Laravel senden 5.1

Antwort

Verwandte Themen