[JQuery]jQuery中serializeArray方法的使用及对象与字符串的转换

Posted 2022-02-11 厦门德仔

使用jQuery中的serializeArray()方法可以方便的将表单中的各个信息，转化为多个name:xx,value:xx对象的数组，

再使用遍历的方式可以方便的将数组转化为json对象，

代码如下

<p id="results"><b>Results: </b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>
<script type="text/javascript">
//其中的serialize()方法将表单信息转化为以&连接的字符串，和提交的信息类似，感觉用处不大
$("#results").append("<tt>"+$("form").serialize()+"</tt>").append("<br/>"+$("form").serializeArray());
//但是serializeArray方法会生成键值对的数组对象，再放到json对象中，使用起来就很方便了
var fields = $("form").serializeArray();
var f = ;//声明一个对象
$.each(fields,function(index,field)
    f[field.name] = field.value;//通过变量，将属性值，属性一起放到对象中
)
//等遍历结束，就会生成一个json对象了
 
//如果需要对象与字符串的转换
//这是从json对象 向 json 字符串转换
 var str = JSON.stringify(f);
 alert(str);
  
//这是将字符串 向 对象转换
 var objectStr = JSON.parse(str);
 alert(objectStr);
  
</script>

生成的json可以传送到服务器，再使用插件直接转化成Javabean对象，使用起来会非常方便，因为省去了繁琐的提取操作语句

如果需要对象与字符串的转换，可以使用多种方法，除了代码中的方法，另外还有两种字符串转对象的方式

jQuery中的$.parseJSON(str) 可把字符串转成对象。。

另外就是js中熟悉的eval方法了，将字符串转化为对象eval(’(’+str+’)’);