为什么在Laravel中使用ajax在表中不显示来自控制器的查询?

时间:2019-01-07 03:24:15

标签: ajax laravel-5 html-table

我想创建一个搜索过滤器,并使用ajax显示输出。

这是用于提交数据的按钮:

Workspace
|-Read
   |-repo
     |-local
       |-scm
         |-1.0
           |-scm-1.0.jar
           |-scm-1.0.pom

这是以下形式的输出表:

   {!! Form::open(['method' => 'POST', 'action' => 'Modul\CarianAnugerahController@search']) !!}

   //Form for filter here...

   {{ Form::submit('Cari', ['class' => 'btn btn-primary', 'id' =>'search']) }}
    {!! Form::close() !!}

获取数据的ajax代码是:

  <div class="panel panel-default">
                  <div class="panel-heading">Senarai Calon Anugerah</div>
                     <div class="panel-body">
                            @if (session('status'))
                                <div class="alert alert-success">
                                    {{ session('status') }}
                                </div>
                            @endif


                             @if(Auth::check())
                                <div class="container table-responsive col-lg-12">
                                    <!-- <div class="container text-center"> -->      
                                        <table class="table table-striped table-bordered" id="calon_table" >
                                            <thead>
                                              <tr>
                                                <td class="text-center col-lg-3"><strong>Name</strong></td>
                                                <td class="text-center"><strong>Action</strong></td>
                                                <!-- <td class="text-center"><strong>Lihat Rekod</strong></td> -->
                                              </tr>
                                            </thead>

                                        <tbody id="calon_anugerah">

                                        </tbody>
                                        </table>
                                    <!-- </div> -->

                                </div>
                            @endif
                            @if(Auth::guest())
                                <a href="/login" class="btn btn-info"> Anda perlu log masuk.</a>
                            @endif
                     </div>
                  </div>
    </div>

我已经使用CarianAnugerahController @ search中的代码查询了数据:

 <script type="text/javascript">
  $('#search').on('click', function(){

    $.get("{{ URL::to('search-calon') }}",function(data){

        $.each(data, function(i, value){

            var tr =$("<tr/>");
              tr.append($("<td/>",{
                  text : value.name
              }))
              $('#calon_anugerah').append(tr);
        });
    })
  })
</script>

这是路线:

 $query = DB::table('itemregistrations')
    ->select('itemregistrations.ItemRegistrationID','itemregistrations.name', 'itemregistrations.Nobadan');

    if(request('umur')) {
        $query->whereRaw('YEAR(CURDATE()) - lahir_yy >= ?', [request('umur')]);  
    }

    if(request('negeri_lahir')) {
        $query->where('NegeriID', request('negeri_lahir'));
    }

    if(request('kategori')) {
        $query->where('CategoryID', request('kategori'));
    }

    if(request('pangkat')) {
        $query->where('OperasiID', request('pangkat'));
    }

$newitem = $query->get();

return response($newitem);

我可以获取该值,但它不会显示在表中。它以json格式在白页中显示输出。

示例输出。在浏览器中。

example output in browser

ajax代码缺少什么?

1 个答案:

答案 0 :(得分:1)

我想您应该删除form actionmethod。因为如果您通过ajax提交表单,则不需要actionmethod。由于actionmethod的原因,您的表单提交就像表单数据的正常发布一样,这就是您在浏览器上接收输出的原因。

 {!! Form::open() !!}
 {{ csrf_field() }}
 //Form for filter here...

 {{ Form::submit('Cari', ['class' => 'btn btn-primary', 'id' =>'search']) }}
 {!! Form::close() !!}

尝试这些更改,看看是否获得期望的结果。并使用post进行ajax调用,您的search-calon路由为POST

<script type="text/javascript">
$('#search').on('click', function(){

$.post("{{ URL::to('search-calon') }}",function(data){

    $.each(data, function(i, value){

        var tr =$("<tr/>");
          tr.append($("<td/>",{
              text : value.name
          }))
          $('#calon_anugerah').append(tr);
    });
})
})
</script>