Laravel 5 AJAX排序订单数据(jQuery Sortable),没有HTML表单

Question

我将尝试使用Laravel 5在我的新网站的帮助中心内存储排序顺序,并且在使用它时遇到一些麻烦.我正在使用jQuery UI .sortable来排列页面上的元素,并且由于整个站点中有多个区域可以排序,我的jQuery脚本是以"一个脚本为所有"的方式构建的.因此使用data-*属性和路由名称引用.

这是我到目前为止的代码:

routes.php文件

Route::post('admin/help-centre/category/{category_id}/section/{section_id}/article/sort-order', 'AdminHelpCentreArticleController@sortOrder');

AdminHelpCentreArticleController.php

public function sortOrder($category_id, $section_id)
{
    /* Return ------------------------------------- */
        return [
            'category_id' => $category_id,
            'section_id' => $section_id
        ];
}

show.blade.php(管理员文章列表)

<ul id="help-center-articles-sort" class="sortable">
    @foreach ($helpCentreArticles as $helpCentreArticle)
        <li class="sortable-element" data-sortable-element-id="{{ $helpCentreArticle->id }}">
            <a href="{{ action('AdminHelpCentreArticleController@show', array($helpCentreCategory->id, $helpCentreSection->id, $helpCentreArticle->id)) }}" target="_self">{{ $helpCentreArticle->title }}</a>
        </li>
    @endforeach
</ul>

<a href="{{ $helpCentreSection->id }}/article/sort-order" target="_self" class="button bm-remove w-full sortable-save" data-sortable-id="help-center-articles-sort">Save Order</a>

scripts.js(包括CSRF令牌_token)

var csrfToken = $('meta[name="csrf-token"]').attr('content');

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    if (options.type.toLowerCase() === 'post')
    {
        options.data += options.data?'&':''; // add leading ampersand if `data` is non-empty
        options.data += '_token=' + csrfToken; // add _token entry
    }
});

$(document).ready(function() {
    $('.sortable').sortable();

    $('.sortable-save').on('click', function(e) {
        e.preventDefault();

        var route = $(this).attr('href'),
            sortableID = $(this).attr('data-sortable-id');

        var data = $('#' + sortableID + ' .sortable-element').map(function() { 
            return $(this).attr('data-sortable-element-id');
        }).get();

        $.ajax({
            type: 'POST',
            url: route,
            dataType: 'json',
            data: { id_array: data },
            success: function(data) {
                console.log(data);
            }, error: function(data) {
                console.log(data);
            },
        });
    });
});

到目前为止,一切都在控制台中的返回响应方面起作用Object {category_id: "1", section_id: "1"}.但无论我尝试什么,我似乎无法通过data地图传递给控制器来使用它.

我已经尝试了一堆猜测,因为我不能在Laravel 5的任何地方找到关于AJAX一个像样的教程,和我试过的东西,如增加一个$data参数传递给sortOrder()方法,我试过Input::all()和Request::all,但所有返回的错误(我我猜是因为它不是一个真正的形式？).

一旦我将数据传递给控制器​​,我就能够轻松地将排序顺序保存到数据库中.但我不能完全达到那个阶段,任何想法？

编辑

我应该注意到我确实有一个HelpCentreArticle模型和一个HelpCentreArticleRequest请求,这里是每个文件中的一些代码,以防它们也需要:

HelpCentreArticle.php

class HelpCentreArticle extends Model {
    protected $fillable = [
        'category_id',
        'section_id',
        'title',
        'content',
        'excerpt',
        'is_visible',
        'sort_order',
        'created_by',
        'updated_by',
    ];
}

HelpCentreArticleRequest.php

class HelpCentreArticleRequest extends Request {        

    /* Authorization ------------------------------ */
        public function authorize()
        {
            return true;
        }


    /* Validation rules --------------------------- */
        public function rules()
        {
            $rules = [
                'title' => 'required|min:3',
                'content' => 'required|min:10',
            ];

            return $rules;
        }

}

我不确定是否需要添加HelpCentreSectionRequest $request作为方法的最后一个参数sortOrder(),所以我可以使用$request->all()但它只是422 (Unprocessable Entity)在控制台日志中返回一个.

Answer 1

所以看来正确的方法是使用Input::get('id_array');而不是$_POST['id_array'];我尝试过的，但是当我最初尝试这个时，我没有将其包含use Input;在控制器的顶部，因为我认为这已经可以访问，但事实并非如此。

添加use Input;和 usingInput::get();现在可以按预期工作。

这是更新后的代码：

AdminHelpCentreArticleController.php

public function sortOrder($category_id, $section_id)
{

    /* Query Select ------------------------------- */
        $helpCentreCategory = HelpCentreCategory::findOrFail($category_id);
        $helpCentreSection = HelpCentreSection::findOrFail($section_id);


    /* Variables ---------------------------------- */
        $id_array = Input::get('id_array');
        $sort_order = 1;


    /* Query Update ------------------------------- */
        foreach($id_array as $id) {
            $helpCentreArticle = HelpCentreArticle::where('id', $id)->first();

            $helpCentreArticle->sort_order = $sort_order;
            $helpCentreArticle->save();

            $sort_order++;
        }


    /* Return ------------------------------------- */
        return ['success' => true];

}

然后您显然可以访问jQuery 中的success语句if else来操作页面。