從後臺獲取數據前臺如何渲染(我用的是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.csdn.net/hzz_321