juqery--获取json数据后一次性填充表单数据的方法

   针对项目中的表单修改等操作,我们首先要获取数据并把数据填充到form表单中,如果你没有使用相关框架做开发,单纯的使用jquery填充表单数据,当表单中的数据对象有很多时,这个时候如果能有一个方法直接调用一个函数就能把数据一次性填充就好啦,下面我们就来说一个load表单数据对象的方法:

   1、首先要获取表单数据,这个在这里就不讲了,假设获取的表单数据对象为; data

   2、下面直接上代码,说明一下,下面有三个函数,主要的方法为loadData(data);其他两个为引用的方法,看一下就能明白;

$("#submit").click(function(){
  //封装的通过form的id、input的name来获取对应表单的数据
  var data = getFormJson('formId');
})
//注意:此方法返回的是 JSON 对象而非 JSON 字符串。
function getFormJson(id){
  var test = $("#"+id).serializeArray();                                //serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。
  var dataStr = "{";
  for(var i = 0;i < test.length;i++){
    var nameT = test(i).name;
    var valueT = test(i).value;
    dataStr = dataStr + "\"" + nameT + "\":\"" + valueT.trim() + "\",";  //trim()方法用来去除空格
  }
  /*获取复选框的值,一般复选框只有一个时,我们在选中和未选中时都要传一个值。选中时,上面的方法会获取到,但是未选中时,这里可以定义你要传的值,我这里传的值为字符串 '0' ,当然你也可以定义其他的值*/
  $("#"+ id + " input[type='checkbox']").each(function(){
    if(!$(this).is(':checked')){                                        //这里判断复选框如果未被选中的话执行下一步
     dataStr =  dataStr + "\"" + $(this).attr('name') + "\":\"0\",";
    }
  });
  dataStr = dataStr.substring(0, dataStr.length - 1);                   //去掉最后一个属性的逗号
  dataStr = dataStr + "}";
  var dataJson = JSON.parse(dataStr);                                   //parse()方法把dataStr对象转成json数据
  return dataJson;
}

好了,代码就这么多,希望能帮到大家

你可能感兴趣的:(jquery)