在 Laravel 中使用 Ajax 将记录检索到表中答案

【问题标题】：Retrieve records into table using Ajax in Laravel在 Laravel 中使用 Ajax 将记录检索到表中
【发布时间】：2017-05-16 09:19:21
【问题描述】：

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

查看视图：

<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方法

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

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

【问题讨论】：

你能提供你在ajax成功中获得的数据结构吗？
@SKJajoriya：它根本不显示任何数据。事实上，它只是在从下拉列表中选择后显示空白页。这就是为什么我要问是否有更好的方法来实现这一目标
使用console.log 来查看实际返回的数据是什么。它可能会给你一个线索。
@T.Shah：我使用了 console.log(data)，但它没有显示任何内容。但是，当我使用 console.log(sid) 时，它会为下拉项提供 id。这表明我正在定位并获取输入，但在处理时它不会返回任何内容。请问，有没有更好的方法可以使用 laravel 根据下拉列表中的选定项目从数据库中获取数据？
首先确保您的 ajax 返回正确的数据。为此，只需从 ajax 返回一条简单消息并在成功部分使用 console.log 来确认您正在接收正确的数据。

标签： php jquery ajax laravel

【解决方案1】：

<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>

【讨论】：

【解决方案2】：

您正在获取“#grpid”的父级，即“col-md-8”并将其存储在“var div”中。在你的ajax成功函数中，你试图找到'#tableview'。但从 html 可以看出，“#tableview”不在“col-md-8”内，即是“#grpid”的父级。因此，您可以在“col-md-8”中使用“#tableview”，也可以简单地使用以下内容：

$('#tableview').append(op);

【讨论】：

非常感谢。对不起，我应该更新这个。我已经能够通过以下方式完成此操作：首先使所有行成为具有不同表 data 和 return$('#tableview').html(op); 的行就像你现在建议的那样。都一样谢谢。竖起大拇指。我已经发布了 coorect 版本，包括下面的 jquery 问题