Laravel 5.1 - 从 ajax 追加刀片答案

【问题标题】：Laravel 5.1 - append Blade from ajaxLaravel 5.1 - 从 ajax 追加刀片
【发布时间】：2016-10-23 09:36:40
【问题描述】：

我想在我的 cmets ajax 列表中附加刀片：

$(document).ready(function(){

    var tablaDatos = $("#comentos");
    var route = "http://localhost:8000/commentList";

    $.get(route, function(res){

        $(res).each(function(key,value){
            tablaDatos.append("<div class='comment'><a class='comment-avatar' href='"+value.user_id+"'><img class='avatar-image-comments' src='{{url($comment->user->profile)}}' width='60' alt=''></a><div class='comment-body'><strong>"+value.user_id+"</strong><h7 class='comment-date'>  -  commentato il "+value.created_at+"</h7><p class='comment-text'>"+value.content+"</p>@if(Auth::check())@if(Auth::user()->id == $comment->user_id || Auth::user()->usertype == 3 )<div class='reply'><div class='inline'><button type='button' value='{{$comment->id}}' class='btn btn-circle btn-dark btn-xs btn-outline' data-toggle='modal' data-target='#myModal'><span>editare</span></button></div><div class='inline'>{!!Form::open(['route'=>['comment.destroy',$comment->id]])!!}<input type='hidden' name='_method' value='DELETE'><button type='submit' class='btn btn-circle btn-dark btn-xs btn-outline'><span>Elimina</span></button>{!!Form::close()!!}</div></div>@endif@endif</div></div>")

        });
    });

});

我需要为用户登录而不是附加刀片功能。但它不起作用，我附上了一张照片：

【问题讨论】：

你真的在一个 .blade.php 文件中吗？因为您的 Blade 语句没有被解析。
@JoelHinz 我的脚本 js 有 comment.js，cmets 的 html 列表有 article.blade.php
那么，你有它。您不能在 javascript 文件中运行 php。
@MikeBarwick 是的，但我想用刀片附加数据 html 我该怎么做？
@Jonathan 是的，也许你有理由，但我尝试像其他答案一样修复，但效果不佳

标签： jquery ajax laravel blade

【解决方案1】：

将刀片语法写入加载的 HTML 文档永远不会给您想要的结果。您可以这样做。

为 cmets 创建一个模板。

resources/views/cmets-template.blade.php

<div class='comment'>
    <a class='comment-avatar' href='{{ $comment->user->id }}'>
        <img class='avatar-image-comments' src='{{ url($comment->user->profile) }}' width='60' alt=''>
    </a>

    <div class='comment-body'>
        <strong>{{ $comment->user->id }}</strong>
        <h7 class='comment-date'>  -  commentato il {{ $comment->created_at }}</h7>
        <p class='comment-text'>{{ $comment->content }}</p>

        @if(Auth::check())
            @if(Auth::user()->id == $comment->user->id || Auth::user()->usertype == 3 )
                <div class='reply'>
                    <div class='inline'>
                        <button type='button' value='{{ $comment->id }}' class='btn btn-circle btn-dark btn-xs btn-outline' data-toggle='modal' data-target='#myModal'>
                            <span>editare</span>
                        </button>
                    </div>
                    <div class='inline'>{!! Form::open(['route'=>['comment.destroy',$comment->id]]) !!}
                        <input type='hidden' name='_method' value='DELETE'>
                        <button type='submit' class='btn btn-circle btn-dark btn-xs btn-outline'>
                            <span>Elimina</span>
                        </button>
                        {!! Form::close() !!}
                    </div>
                </div>
            @endif
        @endif
    </div>
</div>

在您的控制器中，不返回 JSON 对象，而是返回呈现的刀片 HTML 的 JSON 数组。

app/Http/Controllers/CommentController.php

<?php

namespace App\Http\Controllers;

use App\Comment;

class CommentController extends Controller
{
    public function commentList()
    {
        // store the comments list
        $list = [];

        // retrieve comments
        $comments = Comment::all();

        // render each comment and store it
        foreach ($comments as $comment) {
            $html = view('comments-template')
                ->with('comment', $comment)
                ->render();

            $list[] = $html;
        }

        // return a JSON array of the comments list
        return response()->json($list);
    }
}

AJAX 调用

$(document).ready(function(){

    var tablaDatos = $("#comentos");
    var route = "http://localhost:8000/commentList";

    $.get(route, function(res){

        $(res).each(function(key,value){
            tablaDatos.append(value);

        });
    });

});

【讨论】：

@Diego182 如果这对您有用，请将其标记为正确答案。

【解决方案2】：

你试图把太多的事情拼凑在一起。是时候重新评估了吗？

您没有给出任何理由说明为什么需要通过 jQuery 的 $.get() 加载。

但你当然不能在 javascript 中包含 PHP。

为什么不重新设计/commentList 发生的任何事情，以便其控制器可以访问您的$comments，并让该控制器的操作return view('commentlist'); 改为？

那么你的 cmets 页面模板是这样的：

@forelse($comments as $comment)
    <div class='comment'>
        <a class='comment-avatar' href='{{ $comment->user->id }}'>
            <img class='avatar-image-comments' src='{{ url($comment->user->profile) }}' width='60' alt=''>
        </a>
        <div class='comment-body'>
            <strong>{{ $comment->user->id }}</strong>
            <h7 class='comment-date'>  -  commentato il {{ $comment->created_at }}</h7>
            <p class='comment-text'>{{ $comment->content }}</p>
            @if(Auth::check())
              @if(Auth::user()->id == $comment->user_id || Auth::user()->usertype == 3)
                  <div class='reply'>
                    <div class='inline'>
                        <button type='button' value='{{ $comment->id }}' class='btn btn-circle btn-dark btn-xs btn-outline' data-toggle='modal' data-target='#myModal'>
                            <span>editare</span>
                        </button>
                    </div>
                    <div class='inline'>
                        {!! Form::open(['route'=>['comment.destroy', $comment->id]]) !!}
                            <input type='hidden' name='_method' value='DELETE'>
                            <button type='submit' class='btn btn-circle btn-dark btn-xs btn-outline'>
                                <span>Elimina</span>
                            </button>
                        {!!Form::close()!!}
                    </div>
                  </div>
              @endif
            @endif
        </div>
    </div>
@empty
    There are no comments
@endforelse

你得到的是这样的：

$.get(route, function (data) {
    tablaDatos.append(data);
});

但是说真的，我不明白你这样做的理由。您需要解释问题的这方面，并且您似乎过度设计了您的问题。

但是说真的，如果您要拥有像 append() 中那样的史诗般的单行字符串，那么它应该敲响警钟，表明有些事情不太正确。

【讨论】：

【解决方案3】：

你不能这样使用。最好的方法是将模板分离到一个 Blade.php 文件中。然后使用 jQuery 加载数据并使用 DOM 操作将它们推送到模板。

我会把 html 代码放在刀片模板中：

<div class='comment'>
<a class='comment-avatar' id="a_link" href=''>
<img class='avatar-image-comments' src='{{url($comment->user->profile)}}' width='60' alt=''>
</a>
<div class='comment-body'>
<strong>"+value.user_id+"</strong>
<h7 class='comment-date'>  -  commentato il "+value.created_at+"</h7>
<p class='comment-text'>"+value.content+</p>

@if(Auth::check())@if(Auth::user()->id == $comment->user_id || Auth::user()->usertype == 3 )
<div class='reply'><div class='inline'><button type='button' value='{{$comment->id}}' class='btn btn-circle btn-dark btn-xs btn-outline' data-toggle='modal' data-target='#myModal'>
<span>editare</span></button></div><div class='inline'>{!!Form::open(['route'=>['comment.destroy',$comment->id]])!!}<input type='hidden' name='_method' value='DELETE'><button type='submit' class='btn btn-circle btn-dark btn-xs btn-outline'><span>Elimina</span></button>{!!Form::close()!!}</div></div>@endif@endif</div></div>

并使用 jQuery 将值附加到 DOM

$(res).each(function(key,value){
    $('#a_link').attr('href', value.id);
});

在当前视图模板中包含 .blade.php 模板。

【讨论】：

啊..好的，所以如果我用刀片代码创建“comment2.blade.php”：“if(Auth::user()->id...etc..”怎么能我附加一个文件引用？

【解决方案4】：

所有 Blade 视图都被编译成纯 PHP 代码并缓存，直到它们已修改#Source

您需要将 javascript 保存为刀片文件，myjavascript.blade.php 以编译为 php。然后使用 @include 指令来包含该脚本文件。

【讨论】：