3

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 の [Network] タブの [Request Payload] セクションを確認すると、上記のテキスト ボックスに入力したデータを使用して、フォームが正常に送信されていることがわかります。

なぜこうなった ？間違いを犯した場所を教えてください。

更新 1:

上記のコードで試行錯誤していました。名前空間を削除し、ルートからIlluminate\Http\Request引数も削除しました。また、渡すパラメータを文字列からオブジェクトに変更しました。Request $requestpost

そうすることで、私が探していた仕事をしてくれました。なぜ私は知りません。私はまだ私にこれを説明できる人を探しています。

ファイルに名前空間Iluminate\Http\Requestを追加routes.phpしても期待どおりに機能せず、削除してもうまくいかなかったのはなぜですか?

なぜ以前にうまくいかなかったのか誰か教えてもらえますか? どんな種類の助けも大歓迎です。

PS:最近、VueJs コンポーネントの学習を開始しました。

4

2 に答える 2

2

私が従う一般的な慣行として、laravelコントローラーに渡す必要があるフォームデータは、vueフロントエンドから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。および
のコードと一緒に上記のコードをテストしました。もう1つ-シリアル化されたフォームデータをコントローラーに送信する場合、コントローラー内でオブジェクトまたはペアを 含む配列を取得して必要なデータのフェッチを容易にするために、シリアル化を解除する必要があると思います。main.js'/admin/create'
$key=>$value

于 2016-07-01T16:19:15.987 に答える
0

Request および SymfonyRequest クラスのすべての変数 ($attributes、$request、$query など) は保護されています。これは、どちらのクラスも __toString を実装していないためです。

各値を表示する必要がある場合は、正しい getter を呼び出す必要があります。何かのようなもの：

Route::post('/admin', function(Request $request) {    
    return response(['server' => $request->server(), 'form'=>$request->all()]);
});
于 2016-06-29T12:00:21.617 に答える