首页 > 代码库 > 服务端Json数据+js表单数据提交的 表单交互插件(base-form.js)

服务端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="http://www.mamicode.com/jquery.js"></script>

  <srcript type="text/javascript" src="http://www.mamicode.com/demo-form.js"></script>

  <form id="demoForm">

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

   <input type="radio" name="usersex" class="formitem" value="http://www.mamicode.com/1"/>男

   <input type="radio" name="usersex" class="formitem" value="http://www.mamicode.com/0"/>女

   <input type="button" value="http://www.mamicode.com/提交"/>

 </form>

  需要注意的有两点:
  1.1)所有表单字段要加一个class: formitem,因为base-form.js插件根据这个来匹配查找

  1.2)name值要和服务端返回的Json数据属性一样

2)提交数据时的js代码如下:

  var formdata =http://www.mamicode.com/ $(‘#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 =http://www.mamicode.com/ $(‘#demoForm‘).serialize();

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

 

 

 附件: base-form.js

 

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