如何使用ajax在laravel 5中發布表單？

Question

我在學習如何在laravel中制作一個ajax帖子時遇到了很多麻煩。 我希望能夠在驗證后使用jquery顯示錯誤但我不知道如何訪問發送到我的控制器的對象; 所以我甚至不知道控制器中的“返回”是什么。 有人可以帶我走過這個嗎？

這是我觀點的一部分

<meta name="_token" content="{{ csrf_token() }}" />            
<div class='row'>
        {!! Form::open(['url'=>'register','id'=>'sign-up','class'=>'col-md-6 col-md-push-4 form-horizontal'])!!}

            <div class='form-group'>
                {!! Form::label('first_name', 'First Name:',['class'=>'col-xs-12 col-md-3']) !!}
                <div class= 'col-xs-12 col-md-6'>
                    {!! Form::text('first_name', null, ['class' => 'form-control'])!!}
                </div>
            </div>
            <div class='form-group'>
                {!! Form::label('last_name', 'Last Name:',['class'=>'col-xs-12 col-md-3']) !!}
                <div class= 'col-xs-12 col-md-6'>
                    {!! Form::text('last_name', null, ['class' => 'form-control'])!!}
                </div>
            </div>
            <div class='form-group'>
                {!! Form::label('email', 'Email Address:',['class'=>'col-xs-12 col-md-3']) !!}
                <div class= 'col-xs-12 col-md-6 '>
                    {!! Form::text('email', null, ['class' => 'form-control'])!!}
    <div class='form-group'>
            {!! Form::label('password', 'Password:',['class'=>'col-xs-12 col-md-3']) !!}
                <div class= 'col-xs-12 col-md-6'>
                    {!! Form::password('password', null, ['class' => 'form-control'])!!}
                </div>
            </div>

                    <div class='form-group'>
            {!! Form::label('password_confirmation', 'Confirm Password:',['class'=>'col-xs-12 col-md-3']) !!}
                <div class= 'col-xs-12 col-md-6'>
                    {!! Form::password('password_confirmation', null, ['class' => 'form-control'])!!}
                </div>
            </div>
                    </div>  <div class='btn btn-small'>
                {!! Form::submit('Join Us!',['class'=>'btn btn-success btn-sm form-control'])!!}
            </div>

        {!! Form::close() !!}
        </div>

.js文件：

$(function(){

$('#sign-up').on('submit',function(e){
    $.ajaxSetup({
        header:$('meta[name="_token"]').attr('content')
    })
    e.preventDefault(e);

        $.ajax({

        type:"POST",
        url:'/register',
        data:$(this).serialize(),
        dataType: 'json',
        success: function(data){
            console.log(data);
        },
        error: function(data){

        }
    })
    });
});

控制器：

<?php 

namespace App\Http\Controllers;

use App\Http\Requests\CreateRegisterRequest;
use App\Http\Controllers\Controller;
use App\User;
use Illuminate\HttpResponse;
use Input;
class UserController extends Controller
{

    public function create(CreateRegisterRequest $request)
    {

    }

    public function show()
    {
        return view('user.profile');
    }

}

表格要求：

<?php

namespace App\Http\Requests;

use App\Http\Requests\Request;

class CreateRegisterRequest extends Request
{
    public function authorize()
    {
        return true;
    }
public function rules()
    {
        return [
            'first_name' =>'required',
            'last_name'=>'required',
            'url'=>'url',
            'description',
            'email'=>'unique:users,email|email',
            'password'=>'min:6|confirmed',
            'password_confirmation'=>'min:6'


        ];
    }
}

Answer 1

在不查看任何代碼的情況下，我可以告訴您執行此任務的方法。 可能還有其他方法，但這一般是我開始使用Laravel后我接近它的方式。

我希望能夠在驗證后使用jquery顯示錯誤但我不知道如何訪問發送到我的控制器的對象; 所以我甚至不知道控制器中的“返回”是什么。

讓我們首先將其分解為3個更簡單的問題。

1.如何訪問發送到控制器的對象？

那么，在您的AJAX中，您可以選擇發送GET或POST請求。 約定規定您應該使用POST來更新模型，並使用GET從模型中檢索。 如果您正在使用REST，那么您可以使用其他方法（PUT，PATCH，DELETE等）。 您可以自己了解有關這些內容的更多信息，但為了這個答案，我將通過GET和POST保持簡單。

在您的示例中，您使用POST，所以讓我們繼續。 您已經調用了JQuery serialize方法，因此您只需要這樣做。 在Laravel控制器中，只需獲取方法的Request $request參數，Laravel方法$request->input()將為您提供請求中發送的所有參數的鍵/值數組。 然后，您可以相應地處理它們。

2.我應該在控制器中返回什么？

通常，您返回AJAX請求的JSON數據。 它很容易解析，JavaScript和JQuery都有很好的對象可以為你解析JSON。

在Laravel控制器中，您可以在方法末尾添加以下行以返回一些JSON：

return response()->json($data);

在此示例中， $data是一個包含要返回的JSON的數組。 在PHP中，我們可以將JSON字符串表示為鍵/值對的數組，如下所示：

$data = [
    'success': true,
    'message': 'Your AJAX processed correctly'
];

通常，如果這是一個普通的舊PHP腳本，我們必須調用PHP的json_encode函數，但是Laravel為我們處理這個，所以我們需要做的就是傳遞數組。 出於調試目的，您可能希望使用JSON_PRETTY_PRINT常量，如果直接訪問URL，它將在屏幕上很好地輸出JSON：

return response()->json($data, 200, [], JSON_PRETTY_PRINT);

3.如何訪問從控制器發送的對象？

好了，既然你的響應是一個簡單的JSON字符串，你可以使用任何內置的JavaScript方法來解析JSON。 我通常使用JSON.parse(json) ，其中json是控制器返回的JSON字符串。 有關詳細信息，請參見此處

那么，我該如何獲得這些數據？

好吧，看起來你可能已經想到了這一點，但只是為了確保我會澄清。 您需要注冊到控制器的路由。 然后，您可以使用JQuery AJAX對象簡單地調用該URI，然后注入的變量data將是從控制器返回的任何內容，在本例中為JSON字符串。