时间戳

首页 > 解决方案 > 获取并显示ajax响应成功数据

jquery - 获取并显示ajax响应成功数据

问题描述

如何从 Ajax 响应中获取和显示数据？

这就是它返回到控制台的内容。

{current_page: 1, data: Array(15), …}
current_page: 1
data: Array(15)
0:
  amount: "1000.00"
  code: "00000020"
  content_id: 5
  content_type: "App\\Models\\Downpayment"
  created_at: "2021-10-06T01:43:41.000000Z"
  deleted_at: null
  description: "desc"
  items: [{…}]
  name: "Downpayment 1"
  owner_id: 2
  owner_type: "App\\Models\\Member"
  updated_at: "2021-10-06T01:43:41.000000Z"
  updated_by: null
  [[Prototype]]: Object
1: {id: 21, …

返回的数据是数组形式。选择该选项后，其详细数据将显示在表格内。

这是我当前的脚本：

$( '#invoice' ).change(function() {
            console.log('invoice selected!')

            var optionSelected = $(this).find("option:selected");
            invoiceSelected  = optionSelected.val();
            console.log(invoiceSelected);

            $.ajax({
                type: "get",
                cache: false,
                url : "{{ route('credit-notes.invoices') }}",
                data: { invoice : invoiceSelected },
                success: function(data) {
                    console.log('success');
                    console.log(data);

                    invoice_id              = invoiceSelected
                    invoice_name            = data.name // get the data from success response
                    invoice_date            = data.created_at
                    invoice_description     = data.description
                    invoice_amount          = data.amount

                    var row = '<tr id="row-' + invoice_id + '" class="invoice-row">' +
                        '<td>' + '<input type="checkbox"/>&nbsp;' + '</td>' +
                        '<td>' + invoice_name + '</td>' +
                        '<td>' + invoice_date + '</td>' +
                        '<td>' + invoice_description + '</td>' +
                        '<td>' + invoice_amount + '</td>' +
                    '</tr>';
                    $('#invoice-tbody').append(row);
                }
            });
        })
        .change();

标签： jqueryajaxlaravel

解决方案

上面的响应似乎是一个数组响应，因此您需要在表格行上方添加循环以附加这些值。我在下面的代码中添加了循环。如果它不起作用，请检查语法。

   $( '#invoice' ).change(function() {
                console.log('invoice selected!')
    
                var optionSelected = $(this).find("option:selected");
                invoiceSelected  = optionSelected.val();
                console.log(invoiceSelected);
    
                $.ajax({
                    type: "get",
                    cache: false,
                    url : "{{ route('credit-notes.invoices') }}",
                    data: { invoice : invoiceSelected },
                    success: function(data) {
                      console.log('success');
                      console.log(data);
                      data.forEach(val,index){
                        invoice_id              = invoiceSelected
                        invoice_name            = val.name // get the data from success response
                        invoice_date            = val.created_at
                        invoice_description     = val.description
                        invoice_amount          = val.amount
    
                        var row = '<tr id="row-' + invoice_id + '" class="invoice-row">' +
                            '<td>' + '<input type="checkbox"/>&nbsp;' + '</td>' +
                            '<td>' + invoice_name + '</td>' +
                            '<td>' + invoice_date + '</td>' +
                            '<td>' + invoice_description + '</td>' +
                            '<td>' + invoice_amount + '</td>' +
                        '</tr>';
                      }

                        $('#invoice-tbody').append(row);
                    }
                });
            })
            .change();

推荐阅读