如何在 Laravel 5.1 中从 Ajax formData 获取值?

3
以下是我的表单:

这是我的表单:

    {!! 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'
        ];
    }
}

以下是我的控制器:

<?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时,什么也没有输出。
1个回答

8

将formData中的花括号在传递给jquery参数时去掉。

<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>

谢谢你的帮助。你让我的一天变得更美好了。 - Sajan Gurung

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接