Laravel 5.1 在视图中管理 Ajax 个脚本

Question

我是 Laravel 的新手，我正在制作一个基于 Web 的系统，其中有很多 Ajax 回调。问题是我如何组织这些？我希望那些 Ajax 调用仅在特定视图中调用运行。到目前为止，我的结构是这样的：

resources
  views/
    /applicants
  app.blade.php

我沿用了之前 Laravel 的结构 app.blade.php 就是这个

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Applicant's Portal</title>

  <link href="{{ asset('/css/app.css') }}" rel="stylesheet">
  <link href="{{ asset('/css/bootstrap.css') }}" rel="stylesheet">

  <!-- Fonts -->
  <link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <!-- <link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css"> -->
  <link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
  <link href="{{ asset('/css/summernote.css') }}" rel="stylesheet">

  <link href='http://fonts.googleapis.com/css?family=Buenard:700' rel='stylesheet' type='text/css'>



<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="{{ asset('img/qdf.png') }}"></a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">Dashboard</a></li>
        </div>
    </div>
</nav>


@yield('content')


<!-- Scripts -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="{{ asset('js/script.js') }}"></script>
<script type="text/javascript">
$.ajax({
    url: "ajax-applicants", 
    type: 'GET',
    success: function(result){
    var myObj = $.parseJSON(result);
    $.each(myObj, function(key,value) {
        var t = $('#applicantsList').DataTable();
        t.row.add( [
            value.id,
            value.fname + " " +  value.mname + " " + value.lname,
            value.position,
            value.availability,
            value.mobile_number,
            value.email,
            value.age,
        ] ).draw();

    });
}});
</script>

如您所见，这是我所有页面的主要模板，内容只是

@yield('content')

你也可以注意到我下面的 Ajax 调用，如果我只想在特定视图中调用 ajax 请求怎么办，例如

/applicants/create

我知道我可以将该脚本放入 applicants/create 的视图文件中，但它会出错，因为 ajax 调用将在页面加载正确的 javascripts 包含在下面，除非我将所有 javascript 包含在我不想做的顶部。任何建议将不胜感激。谢谢！

Answer 1

我认为您可以通过在模板文件中 body 标签底部包含一个单独的 yield() 来实现您的目标：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="{{ asset('js/script.js') }}"></script>
@yield('scripts')

然后在您的 child 视图中：

@extends('app')

@section('content')
    Content goes here…
@endsectino

@section('scripts')
    <script type="text/javascript">
    $.ajax({
        url: "ajax-applicants", 
        type: 'GET',
        success: function(result){
        var myObj = $.parseJSON(result);
        $.each(myObj, function(key,value) {
            var t = $('#applicantsList').DataTable();
            t.row.add( [
                value.id,
                value.fname + " " +  value.mname + " " + value.lname,
                value.position,
                value.availability,
                value.mobile_number,
                value.email,
                value.age,
            ] ).draw();
        });
    }});
    </script>
@endsection

Laravel 5.1 在视图中管理 Ajax 个脚本

Laravel 5.1 Manage Ajax scripts in views

javascript

ajax

view

layout-manager

laravel-5.1