在Laravel中使用Ajax将记录检索到表中 [英] Retrieve records into table using Ajax in Laravel

问题描述

请，我需要此代码的帮助.我有一个下拉列表，显示了不同类型的帐户.我希望能够在下拉菜单中的更改事件中显示属于那些帐户的交易.我能够使用传统的php和ajax做到这一点.但是我只是在学习laravel框架而被困在里面.请帮助我看看我在哪里缺少它，或者是实现这一壮举的更好方法.

Please, i need assistance to this code. I have a dropdown list,showing different type of accounts. I want to be able to display transactions belonging to those accounts on change events from the dropdown. I am able to do this, using the traditional php and ajax. But i am just learning the laravel frameworks and i am stuck.Please help me look and see where i am missing it or a better way of achieving this feat.

查看视图:

<form role="form">
 <div class="col-md-8">
 <select name="grpid" class="form-control" id="grpid">
    @foreach($account as $account)
    <option value="{{$account->code}}">{{$account->accountName}}</option>
    @endforeach
 </select></div><div class="col-md-4">
<button type="button" name="sbt" class="sbt btn btn-block btn-success"   id="sbt">Retrieve</button></div>
</form>
     </div>
    <br/>
     <br/>
   </h2>
   <div id="tableview"></div> 
  </div>
 </div></div>
@endsection
<script src="/mat/js/newJquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#grpid').on("change",function(){
  var sid = $(this).val();
  var div = $(this).parent();
  var op =" ";

  $.ajax({
    type:'post',
    url: '/postForm',
    data:{
       '_token':$('input[name=_token]').val(),
       'selectedid': sid;
        },
        success: function(data){
        op+='<table>';
        op+='<tr><th>SN</th><th>Date</th><th>Account Type</th><th>Narration</th><th>Amount</th></tr>';
        for(var i=0;i<data.length;i++){
          op+='<tr>';
          op+='<td>'+i+'<td><tr>';
          op+='<tr><td>'+data[i].transdate+'</td></tr>';
          op+='<tr><td>'+data[i].acctype+'</td></tr>';
          op+='<tr><td>'+data[i].accounts_code+'</td></tr>';
          op+='<tr><td>'+data[i].narration+'</td></tr>';
          op+='<tr><td>'+data[i].amount+'</td></tr>';
          op+='</tr>';
        }
         op+='</table>';
         div.find('#tableview').append(op);
       },
        error: function(){
          console.log("Error Occurred");
        }
    });

 });

 });

请参阅Controller的postForm方法

See postForm method of the Controller

 public function postForm(Request $request)
    {
       $data = Accounttrans::where('accounts_code',$request->selectedid)->get();
        return response()->json($data);
    }

填写表格的路线:

Route::get('/openform','AccounttransController@openform');
Route::post('/postForm','AccounttransController@postForm');

请帮助.我想以表格格式显示结果.

Kindly help. I want to display the result in a table format.

推荐答案

<form role="form">
   {{csrf_field()}}
 <div class="col-md-8">
 <select name="grpid" class="form-control" id="grpid">
    @foreach($account as $account)
    <option value="{{$account->code}}">{{$account->accountName}}</option>
    @endforeach
 </select></div><div class="col-md-4">
<button type="button" name="sbt" class="sbt btn btn-block btn-success" id="sbt">Retrieve</button></div>
</form>
     </div>
    <br/>
     <br/>
   </h2>
   <div id="tableview"></div> 

</div>

</div></div>
@endsection
<script src="/mat/js/newJquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#grpid').on("change",function(){
  //var sid = $('#grpid option:selected').val();
  var sid = $(this).val();
  //var div = $(this).parent();
  var op ="";
  console.log(sid);
  //var table  = '<table>';

  $.ajax({
    type:'post',
    url: '/postForm',
    data:{
       '_token':$('input[name=_token]').val(),
        //'selectedid':sid 
       'selectedid': sid//$('select[name =grpid]').val(),
        },
        success: function(data2){
        op+='<table class="table table-striped">';
        op+='<tr><th>SN</th><th>Date</th><th>Account Type</th><th>Account Code</th><th>Narration</th><th>Amount</th></tr>';
        for(var i=0;i<data2.length;i++){
          op+='<tr>';
          op+='<td>'+(i+1)+'</td><td>'+data2[i].transdate+'</td><td>'+data2[i].acctype+'</td><td>'+data2[i].accounts_code+'</td><td>'+data2[i].narration+'</td><td>'+data2[i].amount+'</td></tr>';
        }
         op+='</table>';
         $('#tableview').html(op);
         //console.log("Data Correctly Processed");
          console.log(data2);
       },
        error: function(){
          console.log("Error Occurred");
        }
    });

 });

 });


</script>

这篇关于在Laravel中使用Ajax将记录检索到表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！