php - 没有 HTML 表单的 Laravel 5 AJAX 排序顺序数据(jQuery 可排序)

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 _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 映射传递给 Controller ​​来使用它。

我尝试了很多猜测，因为我在任何地方都找不到关于 Laravel 5 中 AJAX 的一个像样的教程，并且我尝试了一些事情，比如向 添加一个 $data 参数>sortOrder() 方法，我试过 Input::all() 和 Request::all 但它们都返回错误(我猜原因这不是一个实际的形式？)。

一旦我获得要传递给 Controller ​​的数据，我就可以很容易地将排序顺序保存到数据库中。但我还不能完全达到那个阶段，有什么想法吗？

编辑

我可能应该注意到，我确实有一个 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'];，我尝试过，但是当我最初尝试这个时，我没有在我的 Controller 顶部包括 use Input;，因为我认为这已经可以访问了，但事实并非如此。

添加 use Input; 和 using Input::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 中的 if else 语句访问 success 来操作页面。