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

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

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

回答:

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());

}

}

回答:

必须设置标题为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());

}

}

以上是 如何在Ajax调用成功后使用可变数据 - Laravel 的全部内容, 来源链接: utcz.com/qa/262603.html

回到顶部