JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<div class="order">
<p>尊貴的客戶您好,您上次的消費內容是:</p>
<p>訂單編號:<span class="order_id"></span></p>
<p>訂單內容:<span class="order_content"></span></p>
<p>訂單金額:<span class="order_amount"></span></p>
<p>希望這次也能有機會服務您!</p>
</div>
JavaScript
const orderId = $('.order_id')
const orderContent = $('.order_content')
const orderAmount = $('.order_amount')
const getUserAPI = 'https://codelove.tw/fake-api/get-current-user'
const getOrdersAPI = 'https://codelove.tw/fake-api/get-orders'
const getOrderDetailsAPI = 'https://codelove.tw/fake-api/get-order-details'
$.get(getUserAPI)
.then(res => {
// console.log(res.data.user.id)
return $.get(getOrdersAPI, { user_id: res.data.user.id })
})
.then(res => {
// console.log(res.data.orders.length)
return $.get(getOrderDetailsAPI, { order_id: res.data.orders.length })
})
.then(res => {
// console.log(res.data.order)
orderId.text(res.data.order.id)
orderContent.text(res.data.order.content)
orderAmount.text(res.data.order.amount)
})
/* $.get(getUserAPI, {}, res => {
$.get(getOrdersAPI, { user_id: res.data.user.id }, res => {
$.get(getOrderDetailsAPI, { order_id: res.data.orders.length }, res => {
orderId.text(res.data.order.id)
orderContent.text(res.data.order.content)
orderAmount.text(res.data.order.amount)
})
})
})
*/