jQuery實現獲取form表單內容及綁定數據到form表單操作分析

2019-11-19 13:34:13

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現獲取form表單內容及綁定數據到form表單操作。分享給大家供大家參考，具體如下：

在日常開發的過程中，難免會用到form表單，我們需要獲取表單的數據保存到數據庫，或者拿到后臺的一串json數據，要將數據綁定到form表單上，這里我寫了一個基于jquery的，formHelp插件，使用起來也很簡單：

獲取表單的數據：$("#formid").serializeJson();

綁定數據到表單：$("#formid").setForm(json);

jquery.formHelp.js插件

/** * 將form里面的內容序列化成json * 相同的checkbox用分號拼接起來 * @param {dom} 指定的選擇器 * @param {obj} 需要拼接在后面的json對象 * @method serializeJson * */$.fn.serializeJson=function(otherString){  var serializeObj={},    array=this.serializeArray();  $(array).each(function(){    if(serializeObj[this.name]){      serializeObj[this.name]+=';'+this.value;    }else{      serializeObj[this.name]=this.value;    }  });  if(otherString!=undefined){    var otherArray = otherString.split(';');    $(otherArray).each(function(){      var otherSplitArray = this.split(':');      serializeObj[otherSplitArray[0]]=otherSplitArray[1];    });  }  return serializeObj;};/** * 將josn對象賦值給form * @param {dom} 指定的選擇器 * @param {obj} 需要給form賦值的json對象 * @method serializeJson * */$.fn.setForm = function(jsonValue){  var obj = this;  $.each(jsonValue,function(name,ival){    var $oinput = obj.find("input[name="+name+"]");    if($oinput.attr("type")=="checkbox"){      if(ival !== null){        var checkboxObj = $("[name="+name+"]");        var checkArray = ival.split(";");        for(var i=0;i<checkboxObj.length;i++){          for(var j=0;j<checkArray.length;j++){            if(checkboxObj[i].value == checkArray[j]){              checkboxObj[i].click();            }          }        }      }    }    else if($oinput.attr("type")=="radio"){      $oinput.each(function(){        var radioObj = $("[name="+name+"]");        for(var i=0;i<radioObj.length;i++){          if(radioObj[i].value == ival){            radioObj[i].click();          }        }      });    }    else if($oinput.attr("type")=="textarea"){      obj.find("[name="+name+"]").html(ival);    }    else{      obj.find("[name="+name+"]").val(ival);    }  })}

html測試代碼

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>jQueryFormHelp練習</title>  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>  <script src="jquery.formHelp.js"></script>  <script type="text/javascript">  $(function () {    $("#form").setForm({a: '張三家的附近可考慮將', b: '王五', c: '王五', d: 'nishi yaldjlkfjal ',e:7,f:'8;10',i:'王'});  });  function submitForm(){    console.log($("#form").serializeJson('id:12;name:13;'));  }</script></head><body><form id="form">  <div><input type="text" name="a" /></div>  <div><input type="text" name="b" id="b" /></div>  <div><input type="hidden" name="c" id="c" /></div>  <div>    <textarea name="d" rows="8" cols="40"></textarea>    <input type="checkbox" name="f" value="10"/>  </div>  <div><select name="e">    <option value="5" selected="selected">5</option>    <option value="6">6</option>    <option value="7">7</option>  </select></div>  <div>    <input type="checkbox" name="f" value="8" />    <input type="checkbox" name="f" value="9"/>  </div>  <div>    <input name="i" type="radio" value="王" />王    <input name="i" type="radio" value="小" />小  </div>  <div>    <input type="button" name="g" value="Submit" id="g" onclick="submitForm()"/>  </div></form></body></html>

使用在線HTML/CSS/JavaScript代碼運行工具 http://tools.VeVB.COm/code/HtmlJsRun測試運行效果如下：