技術標籤：問題解決Javaweb

問題描述

在開發頁面的時候 可以將類似這樣的靜態資料 儲存到json檔案 在頁面載入的時候渲染 這樣將資料和頁面分離 方便後續修改

解決

建立檔案

自定義介面檔案 init.json /static/api/init.json

自定義指令碼 config.js /static/js/config.js

1）編寫json檔案

2）編寫相關.html頁面 需要引用資料的地方 設定好 id 或者 class值（解釋：id是唯一的 用‘#id’來引用 class可以多處重複 用‘.class’引用） 然後記得引用上自定義的指令碼

3）自定義指令碼

相關程式碼：

init.json

[
  {
    "id": "mytestdemo1",
    "values": "山東省濟南市"
  }
]

html

<input name="mytest1" type="text" class="mytestdemo" id="mytestdemo1">
<input name="mytest2" type="text" class="mytestdemo" id="mytestdemo2">
 

config.js

let localUrl='/demo';
(function ($) {


        let url=localUrl+'/static/api/init.json'

        $.getJSON(url,function (dataJson) {
            console.log(dataJson)
            /*引用id的方式*/
            $("#mytestdemo1").val(dataJson[0].values)
            /*引用class的方式 class值相同的 會載入相同的內容*/
            $(".mytestdemo").val(dataJson[0].values)

        })
})(window.jQuery)
 

效果