Question

我使用jquery ajax创建元素。

到目前为止的代码：

$('button[type="search"]').click(function(e) {
$.ajax({
    url: "{{ route('fine.search') }}",
    type: "POST",
    data: { 
        '_token' : '{{csrf_token() }}',
        'driver_id' : $('select[name="driver_id"]').val(),
        'fine_date' : $('input[name="fine_date"]').val(),
    },
    success: function(data) { 
        if(data.status == true) { 

        var result= ''; 

        $.each(data.getCarbyDriver, function(i, data) { 
        result +=  $('<input/>', {"class": 'col-xs-3 col-sm-3 col-md-3',}).attr({ type: 'radio', name: 'car_id'}).val(data.car_id);
        result += $('<div>' + data.plate_no + '</div>', {"class": 'col-xs-3 col-sm-3 col-md-3',});
        result += $('<div>' + data.start_time + '</div>', {"class": 'col-xs-3 col-sm-3 col-md-3',});
        result += $('<div>' + data.end_time + '</div>', {"class": 'col-xs-3 col-sm-3 col-md-3',});
        }); 
        $('#search-result').html(result); 
        }
    },
    error: function(data) {
       if(data.getCarbyDriver == null) { // if the result is null
            $('#noData').show();
            $(".row-bot, #search-result").hide(); // show the div..
        } 
    }
});  
});

每次使用按钮搜索运行ajax时，都会抛出此错误：[object Object] [object Object] [object Object] [object Object]

但是数据在inspect元素上正确返回，如下所示：

{start_time: "2016-11-12 08:00:00", end_time: "2016-11-12 18:00:00", car_id: 1, plate_no: "IT69164NO",…}

Answer 1

在这里，您尝试使用jQuery创建元素$(something)将返回一个jQuery对象，您尝试将其附加到result。这将导致获得字符串[object Object]。

解决方案是将新创建的元素推送到results数组并使用$('#search-result').append(result);

如果要清除现有项目并添加新项目，请使用$('#search-result').empty().append(result);。这有助于避免重复。

以下是修改后的成功处理程序：

   var result= []; 

    $.each(data.getCarbyDriver, function(i, data) { 
        result.push(
            $('<input/>', {"class": 'col-xs-3 col-sm-3 col-md-3',}).attr({ type: 'radio', name: 'car_id'}).val(data.car_id),
            $('<div>' + data.plate_no + '</div>', {"class": 'col-xs-3 col-sm-3 col-md-3',}),
            $('<div>' + data.start_time + '</div>', {"class": 'col-xs-3 col-sm-3 col-md-3',}),
            $('<div>' + data.end_time + '</div>', {"class": 'col-xs-3 col-sm-3 col-md-3',})
        );
    }); 

    $('#search-result').empty().append(result);

Answer 2

问题在于您正在创建一个对象并将其视为String。而是将对象直接追加到容器（"#search-result"）。你可以试试这样的东西：

$.each(data.getCarbyDriver, function(i, data) {
    var searchResult = $('#search-result');
    $('<input/>', {
            "class": 'col-xs-3 col-sm-3 col-md-3',
            radio: 'car_id',
            value: data.car_id
        }).appendTo(searchResult);
    $('<div/>', {
            "class": 'col-xs-3 col-sm-3 col-md-3',
            text: data.plate_no
        }).appendTo(searchResult);
    $('<div/>', {
            "class": 'col-xs-3 col-sm-3 col-md-3',
            text: data.start_time
        }).appendTo(searchResult);
    $('<div/>', {
            "class": 'col-xs-3 col-sm-3 col-md-3',
            text: data.end_time
        }).appendTo(searchResult);
}

jquery .html（）方法错误[object Object]

2 个答案: