Отправьте форму, используя 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 файл не работал, как я ожидал, и удаление его сделал задачу?
Кто-нибудь может сказать мне, почему это не сработало раньше? Любая помощь высоко ценится.
PS: я недавно начал изучать компоненты VueJs.
2 ответа
В качестве общей практики, которой я следую, любые данные формы, которые необходимо передать контроллеру 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>Тогда в вашем routes.php файл
<?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')]);
});
Я думаю, Illuminate\Http\Request экземпляр возвращает $request - Collection поэтому нам нужно получить доступ к значениям с помощью Methods available on Collections,
Я проверил приведенный выше код вместе с вашим кодом для main.js а также '/admin/create',
Еще одна вещь - я думаю, что если вы отправляете сериализованные данные формы в контроллер, то в контроллере его необходимо десериализовать, чтобы получить объект или массив, содержащий $key=>$value пары для облегчения получения необходимых данных.
Все переменные ($attribute, $request, $query и т. Д.) В классах Request и SymfonyRequest защищены, поскольку ни один из классов не реализует __toString, php делает все возможное, чтобы дать вам все возможное.
Если вам нужно увидеть каждое значение, вам нужно вызвать правильный геттер. Что-то вроде:
Route::post('/admin', function(Request $request) {
return response(['server' => $request->server(), 'form'=>$request->all()]);
});