JQuery+JSON自动填充表单

最新推荐文章于 2021-01-27 16:49:53 发布

laisean

最新推荐文章于 2021-01-27 16:49:53 发布

阅读量1.7k

点赞数 1

分类专栏：网站设计文章标签： jquery json 填充表单

本文链接：https://blog.csdn.net/laisean/article/details/86674003

版权

网站设计专栏收录该内容

2 篇文章 0 订阅

订阅专栏

主要用于“修改”操作的表单中，要求表单name属性值与json的key值一致

    function loadData(obj){
      if($.type(obj)!="object"){
        alert("页面初始化错误！");
        return false;
      }
      var key,value,tagName,type,arr;
      for(x in obj){
        key = x;
        value = obj[x];
        $("[name='"+key+"'],[name='"+key+"[]']").each(function(index){
          tagName = $(this)[0].tagName;
          type = $(this).attr('type');
          if(tagName=='INPUT'){
            if(type=='radio'){                      //处理radio
              $(this).attr('checked',$(this).val()==value);
            }else if(type=='checkbox'){             //处理checkbox
              for(var i =0;i<value.length;i++){
                if($(this).val()==value[i]){
                  $(this).attr('checked',true);
                  break;
                }
              }
            }else if(type=='date'){                  //处理日期型表单
              if(parseInt(value)>1000000000000)      //毫秒时间戳
                $(this)[0].valueAsNumber=parseInt(value);
              else if(parseInt(value)>1000000000)    //秒时间戳
                $(this)[0].valueAsNumber=parseInt(value)*1000;
              else                                   //字符串时间
                $(this)[0].valueAsDate=new Date(value);
            }else{
              if($.isArray(value))                    //表单组情形(多个同名表单)
                $(this).val(value[index]);
              else
                $(this).val(value);
            }
          }else if(tagName=='SELECT' || tagName=='TEXTAREA'){    //处理select和textarea
            if($.isArray(value))
              $(this).val(value[index]);
            else
              $(this).val(value);
          }    
        }); 
      }
    }

使用方法：

直接将初始化数据放在网页中
var obj={$detail};
loadDate(obj);
通过ajax返回json，如
$.getJSON(
"/*url*/",
{"id":data_id},
function(data,textStatus){
if(textStatus=="success"){
loadData(data);
}else{
alert("获取数据失败！");
}
}
);