ajax - ajax后重新加载laravel foreach

Question

我的 View 中有一个 foreach 循环

<div class="col-lg-6 collapse" >
    <div class="job-summ-panel" id="job-summ-panel" >
        @foreach($jobs as $job)
            {{$job['active']}}
        @endforeach
    </div>
</div>

我的页面上还有一个带有 map 标记的 Google map ，当我单击 map 标记时，会进行 ajax 调用来获取与该页面相关的所有信息

$.ajax({
    method: "get",
    url: '/joblocation/jobsummary',
    data: {
        job_ref: marker.getCustomData('job_ref'),
    },
    success: function (response) {
        $('.collapse').collapse('show');
        $('#job-summ-panel').html(response.jobs)
    },                               
}); 

作业首次加载页面时最初为空，因此不会显示任何内容。我不知道如何刷新/重新加载 div 并使用新的响应数据再次执行 foreach。

Answer 1

有两种方法可以实现这一目标。首先是服务器端生成，其次是客户端应用程序。

1。服务器端内容生成

您可能希望将页面的该部分移动到不同的 Blade 模板。然后通过 AJAX 调用，您可以重建页面并将输出发送到浏览器。例如:

路线定义

Route::post("generateList", "Partials@generateList");

部分模板定义

Partials\loopContainer.blade.php

<div class="col-lg-6 collapse" >
    <div class="job-summ-panel" id="job-summ-panel" >
        @foreach($jobs as $job)
            {{$job['active']}}
        @endforeach
    </div>
</div>

您的部分内容生成器

<?php 

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

    class Partials extends Controller {

    public function generateList(Request $request){
        // generate data from the parameters again
        $input = $request->input('job_ref');
        $generatedData = GenerateDataFromJobRef($input);
        return View::make("partials/loopContainer", ["jobs" => $generatedData]);
    }
?>

客户端刷新

$.ajax({
    method: "POST",
    url: '/generateList',
    data: {
        job_ref: marker.getCustomData('job_ref'),
    },
    success: function (response) {
        $('.collapse').collapse('show');
        $('#job-summ-panel').html(response)
    },                               
}); 

2。客户端内容应用程序

路由定义

Route::post("generateList", "Partials@generateList");

您的部分内容生成器

<?php 

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

    class Partials extends Controller {

    public function generateList(Request $request){
        // generate data from the parameters again
        $input = $request->input('job_ref');
        $generatedData = GenerateDataFromJobRef($input);
        return json_encode(["data" => $generatedData]);
    }
?>

客户端刷新

$.ajax({
    method: "POST",
    url: '/generateList',
    data: {
        job_ref: marker.getCustomData('job_ref'),
    },
    success: function (response) {
        $('.collapse').collapse('show');            
        var appendString = "";
        for(var i = 0; i < response.data.length; i++){
            appendString += "<div>" + response.data[i].info + "</div>";    
        }
        $('#job-summ-panel').empty().append(appendString);
    },                               
});