3
AJAXとVueJsを使用してフォームを送信しようとしています。しかし、どういうわけか私はそれを達成することに失敗しています。私はいつも空のIlluminate\Http\Requestオブジェクトを得ることになります。Laravel 5.1のVueJsとAJAXを使用してフォームを送信
ブレードファイル：
<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でネットワークタブの要求ペイロードのセクションを確認した場合。上記のテキストボックスに書いたデータがあれば、フォームが正常に送信されているのがわかります。
どうしてですか？私が間違っている箇所を親切に案内してくれますか？
UPDATE 1：
私は上記のコードで試行錯誤を遊んでいました。そして、名前空間Illuminate\Http\Requestを削除し、ルートから引数Request $requestも削除しました。そして渡すパラメータをstringからobjectに変更しました。
私が探していた私の仕事はそうでした。なぜ私は知らないのですか？私はまだこれを私に説明できる人を探しています。
名前空間Iluminate\Http\Requestをroutes.phpに追加する理由は、私が期待していたとおりに機能しなかったため、タスクが削除されましたか？
なぜ以前にうまくいかなかったのか誰に教えてもらえますか？どのような助けも高く評価されます。
P.S：私は最近VueJsコンポーネントを学び始めている。
私はjQuery（）。serialize（）を試したことがありません。代わりに、Vueコンポーネントにjsonデータオブジェクトを設定し、ポストリクエストとともにそのデータオブジェクトを送信することを好みます。あなたの 'createAdministrator（）'で 'this.username'をリクエストデータとして送信し、あなたが得るものを見てください。例えば、 'createAdministrator（）{これ。$ http.post（ '/ admin'、this.username）.then（レスポンス=> {console.log（レスポンス）;}）' – Donkarnash
@Donkarnash Nope ..それもdidn同じことが起こった..空のオブジェクトを返した.. –
ちょうど勘違い、それを試していない。しかし、.serialize（）は "username = WhateverTheInputIs"のような文字列を返しません。あなたが望むのは、{'username'：WhateverTheInputIs}のようなオブジェクトを投稿することだと思います。 – Liren