JavaScript和Ajax在Laravel 5.2中不起作用

Question

我有我的類別頁面。 我需要在單擊創建類別按鈕時添加新類別。 但是，當我單擊“提交”按鈕時，沒有任何反應，也沒有顯示錯誤消息。 問題出在哪里？ 請幫忙

我的類別刀片模板是

@extends('layouts.admin-master')


@section('styles')
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    {!! Html::style('src/css/categories.css') !!}
@endsection

@section('content')
    <div class="container">
        <section id="category-admin">

            <form action="" method="post">
                <div class="input-group">
                    <label for="Category">Category Name</label>
                    <input type="text" name="name" id="name">
                    <button type="submit" class="btn">Create Category</button>
                </div>
            </form>

        </section>
        <section class="list">
            @foreach($categories as $category)
                <article>
                    <div class="category-info" data-id="{{ $category->id }}">
                        <h3>{{ $category->name }}</h3>
                    </div>

                    <div class="edit">
                        <nav>
                            <ul>
                                <li class="category-edit"><input type="text" name=""></li>
                                <li><a href="#">Edit</a></li>
                                <li><a href="#" class="danger">Delete</a></li>
                            </ul>
                        </nav>

                    </div>
                </article>
            @endforeach
        </section>

        @if($categories->lastPage() > 1)
            <section class="pagination">
                @if($categories->currentPage() !== 1)
                    <a href="{{ $categories->previousPageUrl() }}"><i class="fa fa-caret-left"></i></a>
                @endif

                @if($categories->currentPage() !== $categories->lastPage())
                    <a href="{{ $categories->nextPageUrl() }}"><i class="fa fa-caret-right"></i></a>
                @endif
            </section>
        @endif
    </div>

@endsection

@section('scripts')
    <script type="text/javascript">
        var token = "{{ Session::token() }}";
    </script>
    {!! Html::script('src/js/categories.js') !!}
@endsection

我的category.js文件是

    var docReady = setInterval(function() {
    if(document.readyState !== "complete") {
        return;
    }
    clearInterval(docReady);

    document.getElementsByClassName('btn')[0].addEventListener('click',createNewCategory);
}, 100);

function createNewCategory(event) {
    event.preventDefault();
    var name = event.target.previousElementsSibling.value;
    if(name.length === 0) {
        alert("Please create A valid Category");
        return;

    }
    ajax("POST", "/admin/blog/category/create", "name=" + name, newCategoryCreated, [name]);

}

function newCategoryCreated(params, success, responseObj) {
    location.reload();
}

function ajax(method, url, params, callback, callbackParams) {
    var http;

    if(window.XMLHttpRequest) {
        http = new XMLHttpRequest();
    } else {
        http = new ActiveXObject("Microsoft.XMLHTTP");
    }


    http.onreadystatechange = function() {
        if (http.readyState == XMLHttpRequest.DONE) {
            if (http.status == 200) {
                var obj = JSON.parse(http.responseText);
                callback(callbackParams, true, obj);
            } else if (http.status == 400) {
                alert("Category could not be saved. Please Try Again");
                callback(callbackParams, false); 
            } else {
                var obj = JSON.parse(http.responseText);
                if (obj.message) {
                    alert(obj.message);
                } else {
                    alert("please Check the name");
                }
            }
        }
    }
    http.open(method, baseUrl + url, true);
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    http.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    http.send(params + "&_token=" + token);
}

我的路線文件是

    Route::get('/blog/categories', [
                    'uses' => 'CategoryController@getCategoryIndex',
                    'as' => 'admin.blog.categories'
            ]);
Route::post('/blog/category/create', [
                    'uses' => 'CategoryController@postCreateCategory',
                    'as' => 'admin.blog.category.create'
            ]);

我的類別控制器是

   <?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

use App\Category;

use Illuminate\Support\Facades\Response;

class CategoryController extends Controller
{
    public function getCategoryIndex() {
        $categories = Category::orderBy('created_at','desc')->paginate(5);

        return view('admin.blog.categories',['categories' => $categories]);
    }

    public function postCreateCategory(Request $request) {
        $this->validate($request, [
            'name' => 'required|unique:categories'
            ]);

        $category = new Category();
        $category->name = $request['name'];
        if($category->save()) {
            return Response::json(['message' => 'Category Created'], 200);
        }
        return Response::json(['message' => 'Error during Creation'], 404);
    }
}

Answer 1

將標頭中的令牌或作為參數發送給服務器。 此處的更多信息：

https://laravel.com/docs/5.2/routing#csrf-protection