ajax请求后台表格数据,商品后台表格数据的展现方式
表格數據的展現方式
編輯頁面-->
CodeNamePrice
返回值類型的說明
屬性信息： total/rows/屬性元素{
"total":2000,
"rows":[
{"code":"A","name":"果汁","price":"20"},
{"code":"B","name":"漢堡","price":"30"},
{"code":"C","name":"雞柳","price":"40"},
{"code":"D","name":"可樂","price":"50"},
{"code":"E","name":"薯條","price":"10"},
{"code":"F","name":"麥旋風","price":"20"},
{"code":"G","name":"套餐","price":"100"}
]
}
JSON的簡單介紹
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它使得人們很容易的進行閱讀和編寫。
Object對象類型
Array格式
嵌套格式
例如：{"id":"100","hobbys":["玩游戲","敲代碼","看動漫"],"person":{"age":"19","sex":["男","女","其他"]}}
編輯EasyUITable的VO對象package com.jt.vo;
import com.jt.pojo.Item;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
import java.util.List;
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITable {
private Long total;
private List rows;
}
商品列表展現
頁面分析
說明: 當用戶點擊列表按鈕時.以跳轉到item-list.jsp頁面中.會解析其中的EasyUI表格數據.發起請求url:’/item/query’
要求返回值必須滿足特定的JSON結構,所以采用EasyUITable方法進行數據返回.
data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">
商品ID商品標題葉子類目賣點價格庫存數量條形碼狀態創建日期更新日期
請求路徑的說明
請求路徑: /item/query
參數: page=1 當前分頁的頁數.
rows = 20 當前分頁行數.
當使用分頁操作時,那么會自動的拼接2個參數.進行分頁查詢.
編輯ItemController@RestController//由于ajax調用，采用JSON串返回
@RequestMapping("/item")
public class ItemController {
@Autowired
private ItemService itemService;
/**
* url:http://localhost:8091/item/query?page=1&rows=20 * 請求參數：
* page=1 當前分頁的頁數
* row=20 當前分頁的行數
* 返回值結果：EasyUITable
* */ @RequestMapping("/query")
public EasyUITable findItemByPage(Integer page, Integer rows){
return itemService.findItemByPage(page,rows);
}
編輯ItemServiceImpl@Service
public class ItemServiceImpl implements ItemService {
@Autowired
private ItemMapper itemMapper;
/**
* 分頁查詢商品信息
* Sql語句: 每頁20條
* select * from tb_item limit 起始位置,查詢的行數
* 查詢第一頁
* select * from tb_item limit 0,20; [0-19]
* 查詢第二頁
* select * from tb_item limit 20,20; [20,39]
* 查詢第三頁
* select * from tb_item limit 40,20; [40,59]
* 查詢第N頁
* select * from tb_item limit (n-1)*rows,rows;
*
*
* @param rows
* @return
*/
@Override
public EasyUITable findItemByPage(Integer page, Integer rows) {
//1.手動完成分頁操作
int startIndex = (page-1) * rows;
//2.數據庫記錄
List itemList = itemMapper.findItemByPage(startIndex,rows);
//3.查詢數據庫總記錄數
Long total = Long.valueOf(itemMapper.selectCount(null));
//4.將數據庫記錄 封裝為VO對象
return new EasyUITable(total,itemList);
//MP
}
}
頁面效果展現
參數格式化說明
商品價格格式化說明
1).頁面屬性說明
當數據在進行展現時,會通過formatter關鍵字之后進行數據格式化調用. 具體的函數為KindEditorUtil.formatPrice函數.
價格2).頁面JS分析// 格式化價格 val="數據庫記錄" 展現的應該是縮小100倍的數據
formatPrice : function(val,row){
return (val/100).toFixed(2);
},
格式化狀態信息
1). 頁面標識
狀態2).頁面JS分析// 格式化商品的狀態
formatItemStatus : function formatStatus(val,row){
if (val == 1){
return '正常';
} else if(val == 2){
return '下架';
} else {
return '未知';
}
},
格式化葉子類目
頁面分析
說明:根據頁面標識, 要在列表頁面中展現的是商品的分類信息. 后端數據庫只傳遞了cid的編號.我們應該展現的是商品分類的名稱.方便用戶使用…
葉子類目頁面js分析//格式化名稱 val=cid 返回商品分類名稱
findItemCatName : function(val,row){
var name;
$.ajax({
type:"get",
url:"/item/cat/queryItemName", //
data:{itemCatId:val},
cache:true, //緩存
async:false, //表示同步 默認的是異步的true
dataType:"text",//表示返回值參數類型
success:function(data){
name = data;
}
});
return name;
}
編輯ItemCatPOJO對象@TableName("tb_item_cat")
@Data
@Accessors(chain = true)
public class ItemCat extends BasePojo{
@TableId(type = IdType.AUTO)
private Long id;
private Long parentId;
private String name;
private Integer status;
private Integer sortOrder;
private Boolean isParent; //數據庫進行轉化
}
編輯ItemCatController@RequestMapping("/item/cat")
public class ItemCatController {
@Autowired
private ItemCatService itemCatService;
/**
* url地址:/item/cat/queryItemName
* 參數: {itemCatId:val}
* 返回值: 商品分類名稱
*/
@RequestMapping("/queryItemName")
public String findItemCatNameById(Long itemCatId){
//根據商品分類Id查詢商品分類對象
ItemCat itemCat = itemCatService.findItemCatById(itemCatId);
return itemCat.getName(); //返回商品分類的名稱
}
}
編輯ItemCatServiceImpl@Service
public class ItemCatSercviceImpl implements ItemCatService{
@Autowired
private ItemCatMapper itemCatMapper;
@Override
public ItemCat findItemCatById(Long itemCatId) {
return itemCatMapper.selectById(itemCatId);
}
頁面效果展現
關于Ajax嵌套問題說明
問題描述
當將ajax改為異步時，發現用戶的請求數據不能正常的響應。//格式化名稱 val=cid 返回商品分類名稱
findItemCatName : function(val,row){
var name;
$.ajax({
type:"get",
url:"/item/cat/queryItemName",
data:{itemCatId:val},
//cache:true, //緩存
async:true, //表示同步 默認的是異步的true
dataType:"text",//表示返回值參數類型
success:function(data){
name = data;
}
});
return name;
},
問題分析
商品的列表中發起2次ajax請求
1).data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">
2).ajax請求
解決方案
說明：一般條件下的ajax嵌套會將內部的ajax設置為同步的調用，不然可能會由于url調用的時間差導致數據展現不完全的現象。
關于端口號占用問題
關于項目中common.js引入問題
說明：一般會將整夜頁面的JS通過某個頁面進行標識，之后被其他的頁面引用即可，方便以后的JS的切換。
1).引入xxx.js頁面
2).頁面引入JS
MybatisPlus 完成分頁操作
編輯ItemService//使用MP方式實現分頁操作：
@Override
public EasyUITable findItemByPage(Integer page, Integer rows) {
QueryWrapper queryWrapper=new QueryWrapper();
queryWrapper.orderByDesc("updated");
//暫時之封裝了兩個數據 頁數/條數
IPage iPage=new Page<>(page,rows);
//MP 傳遞了對應的參數，則分頁就會在內部完成，返回分頁對象
iPage=itemMapper.selectPage(iPage, queryWrapper);
//獲取分頁的總記錄數
Long total=iPage.getTotal();
//獲取分頁的結果
List list=iPage.getRecords();
return new EasyUITable(total,list);
}
編輯配置類@Configuration //標識我是一個配置類
public class MyBatisPlusConfig {
//MP 是Mybatis增強的一種工具 關鍵點在limit分頁上，只要是分頁就要用MP中分頁攔截器的操作
@Bean
public PaginationInterceptor paginationInterceptor() {
PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
// 設置請求的頁面大于最大頁后操作， true調回到首頁，false 繼續請求 默認false
// paginationInterceptor.setOverflow(false); // 設置最大單頁限制數量，默認 500 條，-1 不受限制
// paginationInterceptor.setLimit(500);
// 開啟 count 的 join 優化,只針對部分 left join paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
return paginationInterceptor;
}
}
總結
以上是生活随笔為你收集整理的ajax请求后台表格数据,商品后台表格数据的展现方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电脑小米路由器设置虚拟服务器,小米路由器
- 下一篇： 实现单服务器响应多客户机,对等网与客户机