我是 Laravel 的新手，我正在制作一个基于 Web 的系统，其中有很多 Ajax 回调。问题是我如何组织这些？我希望这些 Ajax 调用仅在特定 View 中运行。到目前为止我的结构是这样的:
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('内容')
您还可以注意到下面我的 Ajax 调用，如果我只想在特定 View 中调用该 ajax 请求，例如在
/applicants/create
我知道我可以将该脚本放入 applicants/create 的 View 文件中，但它会出现错误，因为会发生的情况是在页面加载正确的 javascript 之前进行 ajax 调用，包括下面，除非我把所有的 javascript 都包含在顶部，这是我不想做的。任何建议将不胜感激。谢谢!
最佳答案
我认为您可以通过在 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')
然后在您的 subview 中:
@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
关于javascript - Laravel 5.1 在 View 中管理 Ajax 脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32563447/