服務端Json資料+js表單資料提交的 表單互動外掛程式（base-form.js）

標籤：style   推薦   put   end   nload   資料庫   附件   aos   rip   

我們在做表單的查看、編輯裡涉及兩個點：

點1，提交Form表單到伺服器，儲存到資料庫

點2，頁面顯示Form表單裡的所有欄位

 

如果表單的欄位很多，這兩個點會有兩個問題：

1，提交Form時，如何少量代碼、快速擷取表單的所有資料？

2，頁面顯示Form表單時，如何自動給表單的所有欄位自動賦值，而不要一個一個屬性地寫代碼？

 

針對這兩個問題，我有一個推薦的做法，下面以Demo舉例：

1）index.html或index.jsp裡寫一個form表單,引入jquery.js：

  <srcript type="text/javascript" src="jquery.js"></script>

  <srcript type="text/javascript" src="demo-form.js"></script>

  <form id="demoForm">

   <input type="text" name="username" class="formitem"/>

   <input type="radio" name="usersex" class="formitem" value="1"/>男

   <input type="radio" name="usersex" class="formitem" value="0"/>女

   <input type="button" value="提交"/>

 </form>

  需要注意的有兩點：
  1.1）所有表單欄位要加一個class: formitem，因為base-form.js外掛程式根據這個來匹配尋找

  1.2）name值要和服務端返回的Json資料屬性一樣

2）提交資料時的js代碼如下：

  var formdata = $(‘#demoForm‘).serialize();

 $.ajax({
    type: "get",
    data: formdata ,
    url: url,

    cache: false,
    error: function (err) {
        alert(err);
    },
    success: function (data) {
        //在這裡處理返回的資料
        if(data && data["code"]=="ok"){
         var theData = data["data"];//這裡就是你需要的資料
        }
    }
});  

 

3）從伺服器擷取Json資料

$.ajax({
    type: "get",
    data: {"id":1},
    url: url,

    cache: false,
    error: function (err) {
        alert(err);
    },
    success: function (data) {
        //在這裡處理返回的資料
        if(data && data["code"]=="ok"){
             var theData = data["data"];//這裡就是你需要的資料

           renderForm(theData);
        }
    }
}); 

function renderForm(data){

  //data的資料結構是：{"username":"淡然","usersex":1}

  $("#demoForm").setForm(data);  

}

//這樣頁面上就自動給上面的demoForm表單的所有欄位賦值了

 

 

Ok，Demo樣本完成，只需要短短的兩代碼，就能完成前端頁面表單欄位資料的提交、渲染。

：：：：：：

var formdata = $(‘#demoForm‘).serialize();

$("#demoForm").setForm(data); 

 

 

 附件： base-form.js

 

服務端Json資料+js表單資料提交的 表單互動外掛程式（base-form.js）