通过构造AJAX参数实现表单元素JSON相互转换
ajax提交服务器数据,整理一下转换方法。
HTML:
<formid="fm"name="fm"action=""> <inputname="UserName"type="text"value="UserName1"/> </form> <inputname="UserId"id="UserId"type="text"value="UserId1"/>
1.表单元素转QueryString
varq=$('#fm,#UserId').serialize();//q=UserName=UserName1&UserId=UserId1
2.字符串,JSON互相转换
varobj=jQuery.parseJSON('{"name":"John"}');
alert(obj.name==="John");
可以利用jquery-json插件实现转换,直接引用示例
varthing={plugin:'jquery-json',version:2.3};
varencoded=$.toJSON(thing);
//'{"plugin":"jquery-json","version":2.3}'
varname=$.evalJSON(encoded).plugin;
//"jquery-json"
varversion=$.evalJSON(encoded).version;
//2.3
3.表单,元素转Name,Value数组
vararr=$("#fm,#UserId").serializeArray();
/*[
{name:'UserName',value:'"UserName"1'},
{name:'UserId',value:'UserId'}
]*/
4.表单元素转JSON
$.fn.serializeObject=function()
{
varo={};
vara=this.serializeArray();
$.each(a,function(){
if(o[this.name]!==undefined){
if(!o[this.name].push){
o[this.name]=[o[this.name]];
}
o[this.name].push(this.value||'');
}else{
o[this.name]=this.value||'';
}
});
returno;
};
varobj=$('form').serializeObject();
/*obj:Object
UserId:"UserId1"
UserName:"UserName1"
__proto__:Object*/
5.JSON2FORM
$.getJSON('url_to_file',function(data){
for(variindata){
$('input[name="'+i+'"]').val(data[i]);
}
}
Google过程中发现一个更强大的插件http://code.google.com/p/jquery-load-json/
data={
"Name":"EmkayEntertainments",
"Address":"NobelHouse,RegentCentre",
"Contact":"Phone"
}
$('div#data').loadJSON(data);
<divid="data">
<h1id="Name">EmkayEntertainments</h1>
<labelfor="Address">Address:</label>
<spanid="Address">NobelHouse,RegentCentre</span>
<labelfor="Contact">Contactby:</label>
<spanid="Contact">Phone</span>
</div>