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

Question

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

Answer 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();