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

Posted 2023-05-08

【中文标题】获取并显示ajax响应成功数据

【英文标题】：Get and display ajax response success data

【发布时间】：2021-11-30 18:25:28

【问题描述】：

如何从 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();

【问题讨论】：

try invoice_name = data.data.name // 从成功响应中获取数据

Uncaught TypeError: Cannot read properties of undefined (reading 'name')

你返回JSON，你需要处理JSON。查看$.getJSON 函数。然后，你返回一个数组，你明白你必须处理几个元素吗？

【参考方案1】：

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

   $( '#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();

【讨论】：

这里显示所有数据项，我只需要显示所选选项的数据项..

使用 data[0].name 代替 data.name。 data[0] 是数组的第一个元素。