jquery - 如何在 laravel 5.1 中从 ajax formData 获取值？

Question

这是我的表格:

    {!! Form::open(['route' => 'postAddProject', 'id' => 'addProjectForm', 'files' => true]) !!}

    <div class="form-group">
            {!! Form::label('name', 'Name') !!}

            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-pencil-square-o"></i></span>
                {!! Form::text('name', old('name'), ['class' => 'form-control', 'id' => 'name', 'placeholder' => 'Name']) !!}
            </div>

            <p class="text-danger" id="name-error"></p>
        </div>

        <div class="form-group">
            {!! Form::label('link', 'Link') !!}

            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-external-link"></i></span>
                {!! Form::text('link', old('link'), ['class' => 'form-control', 'id' => 'link', 'placeholder' => 'Link']) !!}
            </div>

            <p class="text-danger" id="link-error"></p>
        </div>

        <div class="form-group">
            {!! Form::label('image', 'Image') !!}

            {!! Form::file('image', ['id' => 'image']) !!}

            <p class="text-danger" id="image-error"></p>
        </div>

        <div class="form-group">
            <button class="btn btn-success" id="project-button">Add</button>
        </div>

{!! Form::close() !!}

这是我的 ajax 代码:

<script>
var form = $('#postAddProject');
var button = $('#project-button');
var name = $('#name');
var link = $('#link');
var image = $('#image');
var token = $('input[name=_token]');
var message = $('#message');

var name_error = $('#name-error');
var link_error = $('#link-error');
var image_error = $('#image-error');

button.click(function (event){

event.preventDefault();

var formData = new FormData();
formData.append('name', name.val());
formData.append('link', link.val());
formData.append('image', image[0].files[0]); 

$.ajax({
url: form.attr('action'),
method: 'post',
dataType: 'json',
contentType: false,
processData: false,

headers: {
    'X-CSRF-TOKEN': token.val()
},

data: {
    formData
},

error: function (data) {

    if (data.status === 422) {

         name_error.html(data.responseJSON.name);
         link_error.html(data.responseJSON.link);
         image_error.html(data.responseJSON.image);

    } else {

         alert('success');
    }
}
</script>

这是我的表单请求文件:

class ProjectAddRequest extends Request
{
    public function rules()
    {
        return [
            'name' => 'required|max:255',
            'link' => 'required|url|max:255',
            'image' => 'required|image'
        ];
    }
}

这是我的 Controller :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Requests\ProjectAddRequest;
use App\Http\Controllers\Controller;

class ProjectController extends Controller
{
    public function postAddProject(ProjectAddRequest $request)
    {
        dd($request->input->all());
    }
}

?>

当我提交填写了所有输入内容的表单时，我从表单请求中收到错误消息，表明这些字段是必填字段。看来表单请求没有获取表单数据。当我在函数中使用 Request 并删除 ProjectAddRequest 时，没有任何内容打印出来。

Answer 1

传递给 jquery 参数时，从 formData 中删除大括号。

<script>
var form = $('#postAddProject');
var button = $('#project-button');
var name = $('#name');
var link = $('#link');
var image = $('#image');
var token = $('input[name=_token]');
var message = $('#message');

var name_error = $('#name-error');
var link_error = $('#link-error');
var image_error = $('#image-error');

button.click(function (event){

event.preventDefault();

var formData = new FormData();
formData.append('name', name.val());
formData.append('link', link.val());
formData.append('image', image[0].files[0]); 

$.ajax({
url: form.attr('action'),
method: 'post',
dataType: 'json',
contentType: false,
processData: false,

headers: {
    'X-CSRF-TOKEN': token.val()
},

data: formData,

error: function (data) {

    if (data.status === 422) {

         name_error.html(data.responseJSON.name);
         link_error.html(data.responseJSON.link);
         image_error.html(data.responseJSON.image);

    } else {

         alert('success');
    }
}
</script>