Question

我有以下ajax代码来处理搜索表单的ajax请求。

$(document).ready(function() {
$('#alert-message-warning').hide();
$('.shadow-z-1').hide();
$('#dateprice-search').on('click', '#btn-search', function() { 
    $.ajax({
        type: 'post',
        url: '/date-price',
        data: {
            '_token': $('#csrf').val(),
            'product_id': $("#product_id").val(),
            'start': $("#start").val(),
            'end': $("#end").val()
        },
        success: function(data) {
            console.log(Object.keys(data).length);
            console.log(data);
            var cha = Object.keys(data).length;
            if (cha > 0) {
                $('.shadow-z-1').show();
                $('.shadow-z-1').append("<tr class='liquid-row><td>" + data.start + "</td><td>"+ data.end + "</td><td>" + data.end + "</td><td><a class='btn-m btn btn-m-success'>Available</a></td></tr>");
            }
            else{
                $('#alert-message-warning').show();
                $("#alert-message-warning").fadeTo(2000, 5000).slideUp(5000, function(){
                    $("#alert-message-warning").slideUp(5000);
                });                 
            }
        }
    });
  });
});

如果选择了必需的参数，则提交的结果将在JSON对象中给出。例如5个对象，但java脚本代码打印db表的所有行（全部10行）。我在这做什么错？详细的JSON对象

Answer 1

您获得的是一系列对象。因此，访问您的对象，您必须转到该索引并获取该对象。

例如：data[0].start

或者你可以使用for循环。

for(let i in data) {
    console.log(data[i].start + "\t" + data[i].end);
}

Answer 2

$(document).ready(function() {
    $('#alert-message-warning').hide();
    $('.shadow-z-1').hide();
    $('#dateprice-search').on('click', '#btn-search', function() { 
        $.ajax({
            type: 'post',
            url: '/date-price',
            data: {
                '_token': $('#csrf').val(),
                'product_id': $("#product_id").val(),
                'start': $("#start").val(),
                'end': $("#end").val()
            },
            success: function(data) {
                console.log(Object.keys(data).length);
                console.log(data);
                var cha = Object.keys(data).length;
                $('.shadow-z-1').show();
                if (cha > 0) {
                    for (var i = 0; i < data.length; i++) {

                        $('.shadow-z-1').append("<tr class='liquid-row><td>" + data[i].start + "</td><td>"+ data[i].end + "</td><td>" + data[i].end + "</td><td><a class='btn-m btn btn-m-success'>Available</a></td></tr>");
                    }
                }
                else{
                    $('#alert-message-warning').show();
                    $("#alert-message-warning").fadeTo(2000, 5000).slideUp(5000, function(){
                        $("#alert-message-warning").slideUp(5000);
                    });                 
                }
            }
        });
      });
    });

您只需循环浏览数据。

Answer 3

变量数据是整个Json对象，您需要遍历此对象并附加每个对象。

data.foreach(function(obj) {
    $('.shadow-z-1').append("<tr class='liquid-row><td>" + obj.start + "</td><td>"+ obj.end + "</td><td><a class='btn-m btn btn-m-success'>Available</a></td></tr>"); 
} )

这样您就可以迭代并追加结果。在新的Ajax通话中，您可能希望删除所有内容，这样您就不会混合来自不同通话的结果。

希望这有帮助

无法使用javascript将JSON对象打印到HTML

3 个答案: