【问题标题】:onclick get data from database using ajax laravelonclick 使用 ajax laravel 从数据库中获取数据
【发布时间】:2018-02-11 15:47:37
【问题描述】:

我要做的是在单击列表项时在下拉菜单中加载data-id,它需要从数据库中检索数据并附加到表中。

到目前为止,我在下拉菜单中加载了数据 ID,并在单击列表时发送 ajax 调用以检索数据。

我的代码(控制器页面):

public function calcList($id)
{

    $designId=design::find($id);
    $design = design::select( `design_no`, `design_name`, `weight_length`, `quantity`, `design_image`, `des2`, `des3`, `des4`, `des5`, `des6`, `des7`)->where('id','=',$designId);
    // return Response::json(array('datas' => $design));
    // return response()->json(['data'=>$design]);
    return Response::json($design);
}  

Ajax 请求:

$(document).ready(function() {
    $('.designList').click(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var id =($(this).attr("data-id"));
        $.ajax({
             type:"POST",
             url:"/calc_list/"+id,
             success : function(results) {
                 console.log(results);
             }
        }); 
    });
});  

在控制台日志中,结果打印为 {..}
如何构建json到table?

【问题讨论】:

  • 为什么在刚刚检索数据时使用post方法?
  • @SagarGautam 我不想重新加载当前页面,不重新加载我想多次加载数据。如果有任何方法可以存档相同的请建议我

标签: jquery json ajax laravel laravel-5.4


【解决方案1】:

您不需要找到 designId。 你只需要这样做

    public function calcList($id) {


    $design = design::select( `design_no`, `design_name`, `weight_length`, `quantity`, `design_image`, `des2`, `des3`, `des4`, `des5`, `des6`, `des7`)->where('id',$id)->get();  

    return Response::json($design);
}

您不应该通过首先查找具有 id 的单个设计然后再次使用它来获取 design_no、design_name 等来对数据库进行另一个查询。这似乎是多余的。

【讨论】:

    【解决方案2】:

    首先,您最好使用GET 方法和cache: false ajax 设置。在这种情况下,您不需要传递csrf 令牌。

    其次,你忘了使用get() 方法来获取数据。三、where可以不用=,默认是这样。

    use Response; // don't forget or use response()
    
    public function calcList($id)
    {
        $designId=design::find($id);
        $design = design::select( 'design_no', 'design_name', 'weight_length', 'quantity', 'design_image', 'des2', 'des3', 'des4', 'des5', 'des6', 'des7')->where('id', $designId)->get();
        return Response::json($design);
    }  
    

    您可以将结果显示为如下表格。

    <div id="destination"></div>
    ...
    $.ajax({
             type:"POST",
             url:"/calc_list/"+id,
             success : function(results) {
                 var $table = $('<table></table>');
                 $('#destination').html('');
    
                 for(var i=0;i<=results.length;i++) {
                     $table.append('<tr><td>No</td><td>'+results[i].design_no+'</td></tr>');
                     $table.append('<tr><td>Name</td><td>'+results[i].design_name+'</td></tr>');
                 }
                 $('#destination').append($table);
             }
        }); 
    

    【讨论】:

    • 我收到这样的错误:QueryException SQLSTATE[42S22]: Column not found: 1054 Unknown column '' in 'field list' (SQL: select , , , , , , , , , , , , , , , , , , , , , , , , `` 来自designs id":5,"design_no":"005","design_name":"Design-5","weight_length":"10gms","quantity":"10gms","design_image":null,"balls_7_pcs":" 7","ravi_die":"2","balls_8_pcs":"3","rak_die":"2","balls_10_pcs":"4","deepak_die":"2","other_balls":"4" ,"die_Gold":"2","kambi_2":"4","others":"2","kambi_3":"4"})
    • 哪一行?你是否将错误的$id 传递到方法的第一行?
    • 我通过替换 (design ->'design' ) 来修复上述问题
    • 我得到这样的结果 [..] 如何将其构建为 html @shukshin.ivan
    • It Showing -> 计算:37 Uncaught TypeError: Cannot read property 'design_no' of undefined
    【解决方案3】:

    您以错误的方式检查条件。 find($id) 检索单个记录,而不是主键。修改你的控制器方法。

    public function calcList($id) {
    
        $design = design::select( `design_no`, `design_name`, `weight_length`, `quantity`, `design_image`, `des2`, `des3`, `des4`, `des5`, `des6`, `des7`)->where('id','=', $id)->get();   //*** change to id
    
        // return Response::json(array('datas' => $design));
        // return response()->json(['data'=>$design]);
        return Response::json($design);
    }
    

    更多:https://laravel.com/docs/5.4/eloquent#retrieving-single-models

    还要确保将其添加到您的脑海中

    <meta name="_token" content="{{ csrf_token() }}" />  
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-11-05
      • 1970-01-01
      • 2012-12-14
      • 2019-11-26
      • 2023-03-27
      • 1970-01-01
      • 2011-08-26
      • 1970-01-01
      相关资源
      最近更新 更多