服务端Json数据+js表单数据提交的 表单交互插件（base-form.js）

Posted 2020-09-18

我们在做表单的查看、编辑里涉及两个点：

点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