在 AJAX 响应中插入 JSON 值答案

【问题标题】：Insert JSON value in AJAX response在 AJAX 响应中插入 JSON 值
【发布时间】：2017-04-19 03:58:58
【问题描述】：

我正在动态填充一个表，当我试图连接或插入一个从控制器获得的 JSON 值时，我卡住了。我想插入这个值，因为我需要显示一个图像，所以我插入一个带有来自 JSON 的路由的 HTML 标记。这是我的代码。

控制器

public function consultaProd2(Request $request)
{
    $almacenes = Almacen::orderBy('nombre')->lists('nombre', 'id'); 
    $fechas = explode(' ', $request['RangoFecha']);
    $fechaInicial = $fechas[0].' 00:00:00';
    $fechaFinal = $fechas[2].' 23:59:59';

    $productos = Producto::whereBetween('created_at', [$fechaInicial, $fechaFinal])
                     ->where('almacen_id', '=', $request['Almacen'])
                     ->get();
    return response()->json($productos);
}

脚本

<script type="text/javascript">
    function llenar(response, index, value)
    {
        $('#example1').DataTable({
            "destroy": true,
            "data": response,
            "scrollX": true,
            "columns":[
                {"data":"img"},
                {"data":"id"},
            ]

        });
    }
</script>

<script type="text/javascript">
    function consultaProducto(){
        var tablaDatos = $('#datos');
        var token = $("#token").val();
        var route = '<?= url('producto/consultaProducto') ?>'
        var data = {};
        data.Almacen = $('select[name=Almacen]').val();
        data.RangoFecha = $('input[name=RangoFecha]').val();
                $.ajax({
                    url: route,
                    headers: {'X-CSRF-TOKEN': token},
                    data: data,
                    method: 'POST',
                    statusCode: {
                        400: function() {
                        }
                    }
                }).done(function(response){
                    $.each(response, function(index, value){
                        if(response[index].pathImg == null)
                            var img = "/documento/valach/noimg.png";
                        else
                            var img = response[index].pathImg;
                        var img = "/documento/valach/noimg.png";
                        response[index].img = "<img src="+img+">";
                        //console.log(response);
                        llenar(response, index, value);
                    });

                }).fail(function(response){
                }); 
            }
        }
        return false;
    }

例如，如果查询获得 3 个数组并且我打印 id 它只显示信息而没有任何错误，但是当我使用 data:img 时，这是我插入的值，它会抛出以下错误，之后它会填满表格并显示图像。

Error image here

随着信息的到达，行增加，但如果我在查询中只得到 1 个数组，它会填满表而不会出现任何错误。希望你能帮助我，谢谢。

【问题讨论】：

标签： jquery json datatables

【解决方案1】：

您在循环内调用llenar()，即每次迭代调用一次。您应该在循环完成后调用它。当你（或其他人）在 3 周内重新调查代码时，你真的应该使用一些 { } 来避免混淆:)

$.each(response, function(index, value){
  var img;
  if (response[index].pathImg == null) {
   img = "/documento/valach/noimg.png";
  } else {
   img = response[index].pathImg;
  }
  //var img = "/documento/valach/noimg.png"; ???
  response[index].img = "<img src="+img+">";
});
llenar(response, index, value);

【讨论】：