反序列化自动填写表单

最新推荐文章于 2025-04-21 09:56:17 发布

原创最新推荐文章于 2025-04-21 09:56:17 发布 · 646 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#表单 #序列化 #反序列化

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

这篇博客探讨了如何通过反序列化技术自动填充HTML表单内容，详细介绍了表单结构和配合使用的JavaScript代码块。

反序列化自动填写表单

form表单结构

<form id="fs">
  <div class="field">
    <label>name</label>
    <input type="text" name="name">
  </div>
  <div class="field">
    <label>name</label>
    <input type="text" name="age">
  </div>
  <div class="field">
    <label>name</label>
    <input type="text" name="charId">
  </div>
</form>

js代码块

 //序列化
var data = $('#fs').serialize();
console.log(data)//=> 'name=val&age=val&charId=val'


//反序列化
var data = 'name=val&age=val&charId=val';
data.split('&').forEach(function(param){
  param = param.split('=');
  var name = param[0],
      val = param[1];

  $('#fs [name=' + name + ']').val(val);
})