查詢出的數(shù)據(jù)顯示的HTML標(biāo)簽上

在做項(xiàng)目時(shí)，有時(shí)候會(huì)遇到一些HTML代碼寫好的表格，是沒有數(shù)據(jù)的，或許是固定數(shù)據(jù)的，滿足不了客戶的要求，用戶的需求！所以呢我們需要把從控制器查詢出數(shù)據(jù)對(duì)應(yīng)回填到這個(gè)寫好的表格上，這樣就可以按照客戶的需求，根據(jù)不同用戶靈活回填數(shù)據(jù)！原理和layuiTable.render表單回填數(shù)據(jù)差不多，然而不同于layuiTable.render表單需要使用插件，他是簡(jiǎn)單的HTML的代碼和jquery內(nèi)容實(shí)現(xiàn)的。

首先以下面的代碼為例寫好前端頁(yè)面內(nèi)容：

寫好前端代碼的頁(yè)面顯示效果如圖所示

接著在標(biāo)簽添加上具體id，使接下來能獲取到具體的標(biāo)簽進(jìn)行頁(yè)面數(shù)據(jù)回填綁定，因?yàn)槲覀円话愣紩?huì)在登陸成功時(shí)會(huì)用Session記錄下當(dāng)前登陸用戶的ID，所以我們可以通過獲取到Session記錄的ID提交到控制器通過查詢篩選數(shù)據(jù)庫(kù)中對(duì)應(yīng)用戶的數(shù)據(jù)進(jìn)行回填，因?yàn)樵谥拔乙呀?jīng)寫個(gè)很多查詢的內(nèi)容，而且多表查詢數(shù)據(jù)用來用去幾乎都是同樣的內(nèi)容只是所查詢的表和字段不一樣罷了，所以這就省略不寫了。

現(xiàn)在寫好jquery代碼 提交數(shù)據(jù)和接收，通過id進(jìn)行對(duì)具體的綁定接收數(shù)據(jù)，
//Duobcxyhzl具體路徑
$(function () {
$.post(“Duobcxyhzl”, { UserID:@Session[“UserID”]},function(data){
console.log(data);
$("#UserName").text(data.UserName);//用戶名
$("#RealName").text(data.RealName);//用戶真實(shí)姓名
$("#IDnumber").text(data.IDnumber);//身份證號(hào)
$("#PhoneNumber").text(data.PhoneNumber);//手機(jī)號(hào)
$("#sex").text(data.sex);//性別
$("#Dateofbirth").text(data.Dateofbirth);//出生日期
$("#NativePlace").text(data.NativePlace);//籍貫
$("#Education").text(data.Education);//學(xué)歷
$("#SocialSecurity").text(data.SocialSecurity);//社保
$("#MonthlyProfit").text(data.MonthlyProfit);//月收入
$("#Housing").text(data.Housing);//住房條件
$("#BuyVehicle").text(data.BuyVehicle);//是否購(gòu)車
});
});
回填數(shù)據(jù)后的效果

這就是詳細(xì)的HTML代碼表格數(shù)據(jù)回填的代碼和思路和流程了！

總結(jié)

以上是生活随笔為你收集整理的查询出的数据显示的HTML标签上的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。