Отправьте форму, используя VueJs и AJAX в Laravel 5.1

Question

Отправьте форму, используя VueJs и AJAX в Laravel 5.1

Я пытаюсь отправить форму, используя AJAX и VueJs. Но почему-то мне не удается этого добиться. Я всегда заканчиваю тем, что получаю пустой Illuminate\Http\Request объект.

Файл лезвия:

<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>

Компонент:

<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');
});

Что я получаю взамен:

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

Когда я проверяю раздел «Запрос полезной нагрузки» вкладки «Сеть» в Chrome. Я вижу, что форма успешно отправляется с любыми данными, которые я пишу в текстовом поле выше.

Почему это происходит ? Пожалуйста, направьте меня туда, где я допустил ошибку?

ОБНОВЛЕНИЕ 1:

Я играл методом проб и ошибок с кодом выше. И я удалил пространство имен Illuminate\Http\Request а также убрал аргумент Request $request от post Маршрут. И изменил передаваемый параметр на объект из строки.

Сделав так, сделал для меня ту работу, которую я искал. Почему я не знаю Я все еще ищу кого-то, кто может объяснить это мне.

Зачем добавлять пространство имен Iluminate\Http\Request в routes.php файл не работал, как я ожидал, и удаление его сделал задачу?

Кто-нибудь может сказать мне, почему это не сработало раньше? Любая помощь высоко ценится.

P.S .: Недавно я начал изучать компоненты VueJs.

3

ajax laravel-5.1 php vue-resource vue.js

Решение

По вопросам рекламы [email protected]

Accepted Answer

В качестве общей практики, которой я следую, любые данные формы, которые необходимо передать контроллеру laravel, передаются как объект json из внешнего интерфейса. Затем в контроллере laravel (маршрут с функцией закрытия в вашем случае) значения из полученного объекта json извлекаются с помощью $request->get('key'),
Так что в вашем случае код компонента может быть

    <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>

2

Другие решения

Все переменные ($ attribute, $ request, $ query и т. Д.) В классах Request и SymfonyRequest защищены, поскольку ни один из классов не реализует __toString, php делает все возможное, чтобы дать вам все возможное.

Если вам нужно увидеть каждое значение, вам нужно вызвать правильный геттер. Что-то вроде:

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

0

Источник