我正在使用 Node js 中的模板（我只是使用它，因为我正在学习某些课程，这是步骤之一）。考虑到我在不同帖子中读到的内容，bootstrap 使用 jquery。然后，我意识到当我在其他视图中插入脚本时，head 中的脚本会造成麻烦。例如。这是我的 app.blade.php，在头部，我将脚本作为注释。<!doctype html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Scripts <script src="{{ asset('js/app.js') }}" defer></script>}--> <!-- Fonts --> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <!-- Bootstrap css --> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!-- Style css --> <link rel="stylesheet" type="text/css" href="css/style.css"> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css"></head>我一直遇到麻烦的观点是这个@extends('layouts.app')@section('grid') <!-- Bootstrap css --> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!-- Style css --> <link rel="stylesheet" type="text/css" href="css/style.css">@endsection@section('content') <div class="container"> <h1 class="text-center">NUESTROS PRODUCTOS</h1> <hr>问题是，如果我让 app.blade.php 标签脚本脱离注释，我的目标视图中的脚本（最后一个代码）将不再工作。对于我的子视图，我想在数据库中插入一些数据而不返回视图。我根本没有收到任何错误生成。这听起来很简单，如果我不在我的 app.blade.php 头中注释脚本，那么我的子视图中的脚本可以帮助我避免在我的数据库中插入数据时返回视图，但它不起作用，我可以通过一个简单的警报来更改最后一个，它不会返回任何内容，而是返回一个空白视图。如果您知道我应该在文档中查看什么样的信息，我将不胜感激。
1 回答
慕雪6442864
TA贡献1812条经验 获得超5个赞
我终于修复了它，它似乎与我在子视图中插入脚本代码的方式有问题。我必须阅读有关堆栈的内容（检查https://laravel.com/docs/7.x/blade#stacks），这似乎是在父视图中插入脚本的正确方法。
父视图与问题中发布的相同，但我取消了头部脚本的注释，并将其放在关闭正文标签之前：
@stack('script')我的孩子们的视图现在看起来像这样（重点关注push和endpush部分，这是有问题的脚本）：
@extends('layouts.app')
@section('grid')
<!-- Bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Style css -->
<link rel="stylesheet" type="text/css" href="css/style.css">
@endsection
@push('script')
<script>
x = document.getElementById("alertabien");
y = document.getElementById("alertamal");
x.style.display = "none";
y.style.display = "none";
@foreach($productos as $product)
document.getElementById('postForm{{$product->id}}').addEventListener('submit', prueba{{$product->id}});
function prueba{{$product->id}}(e){
e.preventDefault();
var id = document.getElementById({{$product->id}}).value;
var params = "idproducto="+id+"&idcarrito="+{{$carrito_id[0]->id}};
xhr = new XMLHttpRequest();
xhr.open('POST', '/carrito', true);
xhr.setRequestHeader('Content-type', "application/x-www-form-urlencoded");
xhr.setRequestHeader('X-CSRF-TOKEN', "{{ csrf_token() }}");
xhr.onload = function(){
if(this.responseText){
document.getElementById("alertamal").innerHTML = "Lo sentimos, ha habido un error en la base de datos, por favor recargue la página.";
y.style.display = "block";
$("#alertamal").fadeIn("slow");
$("#alertamal").fadeOut(8000);
} else {
document.getElementById("alertabien").innerHTML = "¡FELICIDADES! Ha añadido correctamente su producto al carrito de compras";
x.style.display = "block";
$("#alertabien").fadeIn("slow");
$("#alertabien").fadeOut(8000);
}
}
xhr.send(params);
}
@endforeach
</script>
@endpush
@section('content')
<div class="alert alert-success" id="alertabien">
</div>
<div class="alert alert-danger" id="alertamal">
</div>
<div class="container">
<h1 class="text-center">NUESTROS PRODUCTOS</h1>
<hr>
<div class="row">
@foreach ($productos as $producto)
<div class="col-md-4 product-grid">
<div class="image">
<a href="#">
<img src="storage/app/images/apple-watch.jpg" class="w-100">
<div class="overlay">
<div class="detail">View Details</div>
</div>
</a>
</div>
<form id="postForm{{$producto->id}}" method="POST" class="postForm">
@csrf
<input type="hidden" id="{{$producto->id}}" name="producto_id" class="producto_id" value="{{$producto->id}}">
<h5 class="text-center">{{$producto->nombre}}</h5>
<h5 class="text-center">Price: {{$producto->precio}}</h5>
<input id="guarda" name="guarda"type="submit" value="AÑADIR AL CARRITO" class="btn buy btn-enviar">
</form>
</div>
<!-- /Product -->
@endforeach
</div>
</div>
@endsection
- 1 回答
- 0 关注
- 68 浏览
添加回答
举报
0/150
提交
取消