怎么用ajax和api完成此页面？

Question

怎么实现点击上面的5个类，用ajax无刷新跳转页面，并请求到api数据？
用的iframe框架~

$(document).ready(function(){
InitDocument();
})

var _api_url="http://192.168.60.245/bitsale_demo/interact_wx.jsp";
var _token="54853f5f2302f91059ec3ad25c77a12d00075281c9";

function InitDocument()
{
init_cmds();

load_order_list();
// show_order_list();
}

function init_cmds()
{
}

function load_order_list()
{
var pa={

token:_token,
type:'vdian'

};

$.ajax({

headers:{
  wellknown:"BitSale.ApiTest",
  method:'GetOrderList'
},
url:_api_url,
type:'post',
data:JSON.stringify(pa),
dataType:'json',
success:function(jo){
  if(jo.result){
    show_order_list(jo.order_list);
  }
},
fail:function(e){
}

})
}

function show_order_list(list)
{
$('#order_list').empty();

$.each(list,function(){

var li=$('<tr class="child-title">'
    +'<td colspan="5"><img src="assets/img/PC.png">'
    +'<div>订单号:<span>'+this.orderid+'</span></div></td>'
  +'</tr>'
  +'<tr class="order_sub_item">'
    +'<td><img src="'+this.src+'"/></td>'
    +'<td>'+this.status_desc+'</td>'
    +'<td>'+this.buyer+'</td>'
    +'<td>'+this.address+'</td>'
    +'<td>'+this.price+'</td>'
    +'<td><ul class="order_cmd"><li class="cmd_refund">退款</li><li></li></ul></td>'
  +'</tr>');

  $(li).click(function(){
    location.href="./bit_order_info.html";
  })

  $(li).find('.cmd_refund').click(function(){
  })

$('#order_list').append(li);

});
}

付代码

Answer 1

非凡哥，你用的是什么框架也不说，叫人家怎么猜透你的心思。。。

Answer 2

后端返回列表数据，当前第几页，总数据，，然后前端做分页样式，数据前端获取之后，填充页面