JavaScript和Ajax不能在laravel 5.2中工作

JavaScript & Ajax not working in laravel 5.2

本文关键字:工作 laravel Ajax 不能 JavaScript      更新时间:2023-09-26

我有我的分类页面。我需要当我点击创建类别按钮它添加新的类别。但是当我点击提交按钮时,什么都没有发生,也没有显示错误信息。问题在哪里?请帮助

我的类别刀片模板是

@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

我的categories.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);
    }
}

将令牌发送到报头或作为参数发送到服务器。更多信息在这里:

https://laravel.com/docs/5.2/routing csrf保护