【发布时间】:2020-11-24 19:16:10
【问题描述】:
我正在使用来自 node js 的模板(我只是使用它,因为我正在学习某些课程,这是其中的步骤之一)。考虑到我在不同帖子中阅读的内容,bootstrap 使用 jquery。然后,我意识到当我在其他视图中插入脚本时,头部的脚本会造成麻烦。
例如。 这是我的 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>
<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>
<script>
@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){
alert('Lo sentimos, ha habido un error en la base de datos, por favor recargue la página.');
} else {
alert('¡Felicidades, ha agregado un nuevo producto a su carrito de compras!');
}
}
xhr.send(params);
}
@endforeach
</script>
@endsection
问题是,如果我让 app.blade.php 标签脚本退出注释,我的目标视图中的脚本(最后一个代码)将不再工作。
对于我的子视图,我想在我的数据库中插入一些数据而不返回视图。我根本没有产生任何错误。听起来很简单,如果我不在 app.blade.php 头中评论脚本,我的子视图中的脚本可以帮助我避免在我的数据库中插入数据时返回视图,但它不起作用,我可以通过一个简单的警报来更改最后一个,它不会返回任何内容,而是返回一个空白视图。
如果您知道我应该在文档中查看什么样的信息,我将不胜感激。
【问题讨论】:
-
“不工作”不是一个足够详细的诊断。您能否更好地描述您想要实现的目标、获得的输出(如果有),并特别注意此代码生成的 any 错误?这段代码应该做什么?尽可能具体是非常重要的,这可能需要在发布问题之前对问题的根本原因进行一些额外的调查。
-
我明白,对不起,这是我第一次使用stackoverflow。
-
学习没有错。我只是说你需要在这里帮助我们,否则我们所能做的就是说“那太不幸了”。如果您可以多挖掘一点并找出问题的性质,我们可能会为您解决它。仅仅把这个丢在这里是不够的。
-
你说得对,我试图在问题中更好地解释,谢谢你的时间。
标签: javascript php node.js laravel vue.js