服務端Json數據+js表單數據提交的 表單交互插件(base-form.js)


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

點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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM