javascript - 您好，我使用 checbox 处理 laravel 过滤器，但遇到了问题。我使用 ajax 和 jquery 来避免重新加载页面

Question

我希望当您单击复选框时，我的页面只会部分更改。我用了两种方法。首先，我将我的 ajax 数据传递给执行我的请求并返回我调整的部分视图的控制器，然后我尝试注入函数 append () 但它不起作用。第二，控制器返回一个我在 ajax 中恢复的 json 对象，并尝试使用 append 显示。问题是我的请求的数据包含相关的表，我不知道如何在 $.each() 的附加部分中显示它，例如 $jobs->company->name)。

这是我的视图代码，其中包含复选框

  <div class="panel-body">
    @foreach($typelists as $typelist)
    <label for="{{ $typelist->name }}"><input type="checkbox" 
      name="{{ $typelist->name }}" id="{{ $typelist->name }}"
      value="{{ $typelist->id }}" 
      onclick="jobfiltre('{{ $typelist->name }}')"> {{ $typelist->name }} 
    </label>
    @endforeach
 </div><!-- panel-body -->

这是我的javascript函数

<script type="text/javascript">
    function jobfiltre(nom) {
        var nom1 = '#'+nom;
        var id;
        id = $(nom1).val();
        console.log(id);
        var  choix = $(nom1).is(':checked');
        console.log(choix);
        if(choix == true) {
            $.ajax({
                url: '{{ url('jobs') }}/' + id,
                type: 'get',
                dataType: 'json',
                cache: false,
                data: {'id': id},
                success: function (data) {
                    // console.log(data);
                    $('#typeJobs').empty();
                    $.each(data, function(index,filtreTypes){
                        console.log(filtreTypes.ville);
                        $('#typeJobs').append('<div class="job-ad-item"><div class="item-info"><div class="item-image-box" <div class="item-image">'+
                            '<a href=\"/jobs/single/'+filtreTypes.id+'\">'+'<img src=\"images/avatars/'+filtreTypes.user.avatar+'\" alt="Image" class="img-responsive" heigth="75px" width="75px"></a> </div><!-- item-image --> </div> <div class="ad-info"> <span><a href=\"/jobs/single/'+filtreTypes.id+'\" class="title">'+filtreTypes.titre+'</a> @ <a href="#">'+filtreTypes.entreprise+'</a></span> <div class="ad-meta"> <ul> <li><a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i>filtreTypes.ville.name</a></li> <li><a href="#"><i class="fa fa-clock-o" aria-hidden="true"></i>filtreTypes.type.name</a></li> <li><a href="#"><i class="fa fa-money" aria-hidden="true"></i>filtreTypes.salaire.salmin+'-'+filtreTypes.salaire.salmax</a></li> </ul> </div><!-- ad-meta --> </div><!-- ad-info --> </div><!-- item-info <hr style="width: 100%">--> </div><!-- job-ad-item -->');');
                    });
                },
                error: function (e) {
                    console.log(e.responseText);
                },
                complete: function () {
                    $('#loader').css("visibility", "hidden");
                 }
              });
           }
        }
   </script>

这是我的控制器

 public function filtreType($id) {
    $filtreTypes =Job::with('Category')
        ->with('Ville')
        ->with('Type')
        ->with('Salaire')
        ->with('User')
        ->where('type_id', $id)
        ->where('confirmed', 1)
        ->limit(5)
        ->orderBy('updated_at', 'desc')
        ->get();
       // if(Request::ajax()) 
       //return Response::json(['filtreTypes'=>$filtreTypes ]);
       //dd($filtreTypes);
       //return view('Filtre.typeJobs', compact('filtreTypes'));
      return $filtreTypes;

这是我要动态更改的视图

 <div class="col-sm-8 col-md-8">
                    <div class="section job-list-item" id="typeJobs">
                        @foreach($joblists as $joblist)
                            <div class="job-ad-item">
                                <div class="item-info">
                                    <div class="item-image-box">
                                        <div class="item-image">
                                            <a href="{{ route('jobsingle', 
  ['id'=>$joblist->id]) }}"><img src="{{url('images/avatars/'. 
  $joblist->user->avatar) }}" alt="Image" class="img-responsive"></a>
                                        </div><!-- item-image -->
                                    </div>

                                    <div class="ad-info">
                                        <span><a href="{{ route('jobsingle', ['id'=>$joblist->id]) }}" class="title">{{ $joblist->titre }}</a> @ <a href="#">{{ $joblist->entreprise->name }}</a></span>
                                        <div class="ad-meta">
                                            <ul>
                                                <li><a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i>{{ $joblist->ville->name }}</a></li>
                                                <li><a href="#"><i class="fa fa-clock-o" aria-hidden="true"></i>{{ $joblist->type->name }}</a></li>
                                                <li><a href="#"><i class="fa fa-money" aria-hidden="true"></i>{{ $joblist->salaire->salmin }}-{{ $joblist->salaire->salmax }}</a></li>
                                            </ul>
                                        </div><!-- ad-meta -->
                                    </div><!-- ad-info -->

                                </div><!-- item-info <hr style="width: 100%">-->
                            </div><!-- job-ad-item -->


                            @if($loop->index %2 == 0)
                                <div class="job-ad-item">
                                    <div class="ad-info">
                                        <div class="ad-section text-center">
                                            <a href="#"><img src="{{ asset('images/ads/3.jpg') }}" alt="Image" class="img-responsive"></a>
                                        </div><!-- ad-section -->
                                    </div>
                                </div>
                            @endif
                        @endforeach

                    </div>

这是我要添加的部分视图

  <div class="section job-list-item" id="typeJobs">
      @foreach($filtreTypes as $filtreType)
        <div class="job-ad-item">
          <div class="item-info">
            <div class="item-image-box">
                <div class="item-image">
                    <a href="{{ route('jobsingle', ['id'=>$filtreType->id]) }}"><img src="{{url('images/avatars/'. $filtreType->user->avatar) }}" alt="Image" class="img-responsive"></a>
                </div><!-- item-image -->
            </div>

            <div class="ad-info">
                <span><a href="{{ route('jobsingle', ['id'=>$filtreType->id]) }}" class="title">{{ $filtreType->titre }}</a> @ <a href="#">{{ $filtreType->entreprise->name }}</a></span>
                <div class="ad-meta">
                    <ul>
                        <li><a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i>{{ $filtreType->ville->name }}</a></li>
                        <li><a href="#"><i class="fa fa-clock-o" aria-hidden="true"></i>{{ $filtreType->type->name }}</a></li>
                        <li><a href="#"><i class="fa fa-money" aria-hidden="true"></i>{{ $filtreType->salaire->salmin }}-{{ $filtreType->salaire->salmax }}</a></li>
                    </ul>
                </div><!-- ad-meta -->
            </div><!-- ad-info -->

        </div><!-- item-info <hr style="width: 100%">-->
    </div><!-- job-ad-item -->
    @if($loop->index == 7)
        <div class="ad-section text-center">
            <a href="#"><img src="{{ asset('images/ads/3.jpg') }}" alt="Image" class="img-responsive"></a>
        </div><!-- ad-section -->
    @endif
@endforeach

我解决了我的问题。我没有在 append() 函数中显示我的变量。我的过滤器不能按我的意愿工作。实际上它只显示最后一个选中复选框的结果。如果我选中一个复选框，则显示结果，但如果我选中两个或更多复选框，则最后一个返回给我的结果。我想使用我以前的代码获得所有复选框的结果。你可以帮帮我吗

标签： javascriptjqueryajaxlaravel-5