form表单数据回填

前言：

      我相信很多人在做项目的时候都会碰到数据回填，每当有一个修改页面那么

就逃不掉，可以说修改跟回填是已经牢牢挂钩了，那么这时候有很多小伙伴

就会很头疼了，当我们的页面的form表单需要回填的数据特别特别多的时候，

这时候如果还一个一个文本框的为他们去设置它们的value值时，就会浪费掉

我们大量的时间和精力，这种做法无疑是十分愚蠢的，那有没有一种方法，可

已让我们轻松一些呢？

答案是：有的。。。那么开始正题。

数据回填说白了就是先向控制器发出请求，然后请求回来数据后，按照字段把

相应的input标签中。

  1.第一步：请求数据

      这里我用jQuery的$.post方法去向后台请求数据：注key一定要和控制器中的参

数名一致，

      $.post(“请求路径”，{（参数key：value），function（bd）{

        console.log(db)

}};

这时db就是请求回来要回填的数据了。注：db是个object，也就是这种

{key：value}的形式的。

2.第二步：数据回填

          表数据请求回来后就到回填数据了，

              首先回填是根据它的name属性有什么然后再从bd里面去获取

             搞清楚流程后那么问题就很简单了，首先，是根据name。我们都知道form的input

        的name其实呢就是bd里面的key，而对象里获取值的方式有

1. Obj.key=value;
2. Obj[key]=value.这里很明显要用第二种昂，第一种是明确的指定了对象里的key

而第二种括号里面可以是个变量，它可以是Obj里面的任意一个keyname。

话到这里其实已经十分明确

for(let a in bd){

  //注：a是bd的key

  let val=bd[a];

             //再说一遍吧：input的name值一般都是与库中的键是一致的，那么去请求

回来的数据也是一样的

  那么a呢其实也就是input的name属性的值

那么我们就可以通过name去锁定需要回填的标签

$(“input[name=’`${a}`’]”),其实最好是给他们一个统一的class，比如说这个表

单是t1,另一个是t2，这样可以防止别的form表单里面的input有相同的

name值.

//这里还需要对值进行以下判断，像true/false这些一般都是复选框的，如果

是true就得勾上，而不是把true填进去，所以要过滤掉Boolean值

If(obj[a].construtor==Boolean){

   If(obj[a]){

       $(“input[name=’`${a}`’]”).click();

}

}else{

     $(“input[name=’`${a}`’]”).val(obj[a]);

}

}

总结：代码

function (url, parameter , unifiedclass){

$.post(url，parameter，function（bd）{

    for(let a in bd){

        let content=bd[a];

        if(content.construtor==Boolean){

            if(content){

                                  $(“.`${ unifiedclass }`[name=’`${a}`’]”).click();

}

}else{

                $(“. `${ unifiedclass }` [name=’`${a}`’]”).val(content);

}

    }

}

}

};

Emmmmmm….没毛病，就是这些个代码就能满足我的需求了