JSFiddle - React, Tailwind, and code Playground

by jason60810

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<div>
  <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, {}, res => {
	
  $.get(getOrdersAPI, { user_id: res.data.user.id }, res => {
    
    $.get(getOrderDetailsAPI, { order_id: res.data.orders.at(-1).id }, res => {
    	orderId.text(res.data.order.id)
      orderContent.text(res.data.order.content)
      orderAmount.text(res.data.order.amount)
    })
  })
})