从后台获取数据前台如何渲染(我用的是layui和bootstrap开发的前端，我想这应该都适用)

1.如何在一个标签中的填充后台数据

例如：<li><span class="info" id="datasetChineseName">在此渲染数据</span></li> 

    js代码如下所示： $('标签的id').text(你需要的数据);

//此为前端的一个div

<div>
    <li><span class="info" id="datasetChineseName">在此渲染数据</span></li> 
    <li><span class="info" id="datasetName">在此渲染数据</span></li> 
    <li><span class="info" id="businessType">在此渲染数据</span></li> 
</div>



//次为简单的js代码
$(function () {
    $.ajax({
        url: "detailedInfoDataset?datasetName=${datasetName}",  //路径 只需改为你的路径即可
        type: "get",
        dataType: "json",
        success: function (m) {
            console.info(m.data.datasetName)
            $('#datasetChineseName').text(m.data.datasetChineseName);
            $('#datasetName').text(m.data.datasetName);
            $('#businessType').text(m.data.stRegionalDataset.businessType);
           
        }
    })
});

 2.如何给一个input标签进行渲染数据

例如：<input type="text" name="acceptType"  placeholder="请输入..." value="" class="layui-input" id="datasetId">

js代码如下所示： $('标签的id').val(你需要的数据);

<input type="text" name="acceptType"  placeholder="请输入..." value="" class="layui-input" id="datasetId">


 // js代码 
    $(function () {
        $.ajax({
            url: "getDatasetId",//路径 只需改为你的路径即可
            type: "get",
            dataType: "json",
            success: function (m) {
                $('#datasetId').val(m.data);
            }
        });
    });

 

3.如何给一个select标签进行渲染数据

例如：

<td>
    <select name="fileFormat" id="datasetProperty">
        <option>请选择</option>
    </select>
</td>

直接上代码：

//前端代码

<td>
   <select name="fileFormat" id="datasetProperty">
       <option>请选择</option>
   </select>
</td>


//js代码

 $(function () {
        $.ajax({
            url: "getDatasetProperty",
            type: "get",
            dataType: "json",
            success: function (data) {
               var _data = data.data;  //由于后台传过来的json有个data，在此重命名
                var html="";
                for (var  e in _data){
                    html+='<option value='+_data[e].id+'>'+_data[e].name+'</option>'
                }
                $("#datasetProperty").append(html); //渲染
            }
        });
    });

 

欢迎您浏览：https://blog.youkuaiyun.com/hzz_321