查询出的数据显示的HTML标签上

查询出的数据显示的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代码表格数据回填的代码和思路和流程了！