如何在Ajax调用成功后使用可变数据 - Laravel

Question

我创建了一个小文件管理器来管理我的文件。一方面，JsTree显示了文件夹结构。在右侧，我希望基于点击左侧文件夹，我显示了该文件夹中包含的文件。 点击一个Ajax调用，调用selectFiles方法来遍历路由。现在在控制台中，我看到了正确的数据，但我不知道如何将它用于刀片中的foreach。

AJAX：

// chiamata Ajax per selezionare files in base all'id 
$('#treeview').on("select_node.jstree", function (e, data) { 
    var id = data.node.id; 
    $.ajax({ 
     type: 'POST', 
     url: 'archivio_documenti/+id+/selectFiles', 
     data: {id:id}, 
     success: function(data) { 
      console.log('Succes!',data); 
     }, 
     error : function(err) { 
      console.log('Error!', err); 
     }, 
    }); 
}); 

DocumentiController.php：

/** 
* Selzionare files in base all'id della cartella 
*/ 
public function selectFiles(Request $request){ 
    try{ 
     $id = $request->id; 
     $files = \App\Documento::where('cartella_id',$id)->get(); 

     return response()->json(compact('files')); 

    } 
    catch(\Exception $e){ 
     echo json_encode($e->getMessage()); 
    } 
} 

路线：

Route::post('archivio_documenti/{id}/selectFiles', '[email protected]'); 

更新：

    @foreach($files as $key => $file) 
         <div id="myDIV" class="file-box"> 
          <div class="file"> 

           {!! Form::open(['method' => 'DELETE','route' => ['documento.destroy', $file->id]]) !!} 
           <button type="submit" class="#" style="background: none; border: none; color: red;"> 
            <i class='fa fa-trash' aria-hidden='true'></i> 
           </button> 
           {!! Form::close() !!} 

           <a href="/documento/{{ $file->id }}/edit" class="#" role="button" style="text-align: center;"><i class='fa fa-edit' aria-hidden='true'></i></a> 

           <input id="myInput_{{$key}}" type="text" value="{{'project.dev/'.$file->path.'/'.$file->file}}"> 
           <a href="#"><i class="btnFiles fa fa-files-o" aria-hidden="true" data-id="{{$key}}"></i></a> 

           <a href="{{' http://project.dev/'.$file->path.'/'.$file->file}}"> 
            <span class="corner"></span> 

            <div class="icon"> 
             <i class="img-responsive fa fa-{{$file->tipo_file}}" style="color:{{$file->color_file}}"></i> 
            </div> 
            <div class="file-name"> 
             {{$file->file}} 
             <br> 
             <small>Update: {{$file->updated_at}}</small> 
            </div> 
           </a> 
          </div> 
         </div> 
        @endforeach 

Answer 1

OK，你的foreach有点复杂，但这个想法本身是简单：使用Javascript重新创建刀片中的foreach循环，并将结果附加到DOM。

在你的success回调你可以例如做到这一点：

$('#treeview').on("select_node.jstree", function (e, data) { 
    var id = data.node.id; 
    $.ajax({ 
     type: 'POST', 
     url: 'archivio_documenti/+id+/selectFiles', 
     data: {id:id}, 
     success: function(data) { 

      // Build the HTML based on the files data 

      var html = ''; 

      $.each(data, function(i, file) { 
       html += '<div class="file" id="file_' + file.id + '">' + file.updated_at + '</div>'; 
      }); 

      // Append the built HTML to a DOM element of your choice 

      $('#myFilesContainer').empty().append(html); 

     }, 
     error : function(err) { 
      console.log('Error!', err); 
     }, 
    }); 
}); 

显然，这是简化，你需要使用你已经证明我们在上面的foreach环HTML结构，但这个想法是一样的：通过您的文件（1）环在data对象中并逐行构建HTML结构，（2）将整个HTML块放入DOM中，无论用户点击某个文件夹后需要显示哪个HTML块。

备选：

如果你想保持刀片，而不是javascipt的的foreach循环，你可以在循环移动到一个单独的刀片：

folder_contents.blade.php

@foreach($files as $key => $file) 
         <div id="myDIV" class="file-box"> 
          <div class="file"> 

           {!! Form::open(['method' => 'DELETE','route' => ['documento.destroy', $file->id]]) !!} 
           <button type="submit" class="#" style="background: none; border: none; color: red;"> 
            <i class='fa fa-trash' aria-hidden='true'></i> 
           </button> 
           {!! Form::close() !!} 

           <a href="/documento/{{ $file->id }}/edit" class="#" role="button" style="text-align: center;"><i class='fa fa-edit' aria-hidden='true'></i></a> 

           <input id="myInput_{{$key}}" type="text" value="{{'project.dev/'.$file->path.'/'.$file->file}}"> 
           <a href="#"><i class="btnFiles fa fa-files-o" aria-hidden="true" data-id="{{$key}}"></i></a> 

           <a href="{{' http://project.dev/'.$file->path.'/'.$file->file}}"> 
            <span class="corner"></span> 

            <div class="icon"> 
             <i class="img-responsive fa fa-{{$file->tipo_file}}" style="color:{{$file->color_file}}"></i> 
            </div> 
            <div class="file-name"> 
             {{$file->file}} 
             <br> 
             <small>Update: {{$file->updated_at}}</small> 
            </div> 
           </a> 
          </div> 
         </div> 
        @endforeach 

然后，在你的控制器：

public function selectFiles(Request $request){ 
    try{ 
     $id = $request->id; 
     $files = \App\Documento::where('cartella_id',$id)->get(); 

     // Save the view as string 
     $view = view('folder_contents.blade.php', compact('files')))->render(); 

     // Pass the ready HTML back to Javasctipt 
     return response()->json(compact('view')); 

    } 
    catch(\Exception $e){ 
     echo json_encode($e->getMessage()); 
    } 
} 

Answer 2

必须设置标题为Ajax

headers: { 
     'X_CSRF_TOKEN':'xxxxxxxxxxxxxxxxxxxx', 
     'Content-Type':'application/json' 
    }, 

，并在控制器

public function selectFiles(Request $request){ 
    try{ 

     $id = $request->id; 

     $files = \App\Documento::where('cartella_id',$id)->get(); 

     return response()->json($files); 

    } 
    catch(\Exception $e){ 
     echo json_encode($e->getMessage()); 
    } 
}