查詢出的數據顯示的HTML標簽上

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

首先以下面的代碼為例寫好前端頁面內容：

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

接著在標簽添加上具體id，使接下來能獲取到具體的標簽進行頁面數據回填綁定，因為我們一般都會在登陸成功時會用Session記錄下當前登陸用戶的ID，所以我們可以通過獲取到Session記錄的ID提交到控制器通過查詢篩選數據庫中對應用戶的數據進行回填，因為在之前我已經寫個很多查詢的內容，而且多表查詢數據用來用去幾乎都是同樣的內容只是所查詢的表和字段不一樣罷了，所以這就省略不寫了。

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

這就是詳細的HTML代碼表格數據回填的代碼和思路和流程了！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。