对serialize和jsonp的认识与使用

今天,在项目中需要把表单域中大量的字段提交给后台,表单域内字段包括text,passwordradio等,也由于表单域数据量较大,因此form使用了post方法,并使用了jqueryserlalize()方法对表单值进行序列化,创建 URL 编码文本字符串,序列化按我的理解就是在每个表单域中,把各个表单元素值,其中需要包含“name”属性,按前后的顺序,通过&连接符进行链接起来,如下代码:

http://gmpa.globalmarket.com/online/exhibitionApplyCallback.gm?callback=jQu…02&webSite=123456&passWord=123456&PasswordAgain=123456&compNameCN=%E6%82%A8%E5%A5%BD&compNameEN=&compSite=&cate=%E5%8A%9E%E5%85%AC%E6%96%87%E6%95%99%E7%94%A8%E5%93%81&address=%E6%82%A8%E5%A5%BD&mainProduct=%E6%82%A8%E5%A5%BD&applyName=%E6%82%A8%E5%A5%BD&applyPhone=%2B86+12345678902&applyEmail=474957860%40qq.com&standards=Y,N,Y,N,Y,N,Y,N&_=1380297237471

对数据进行序列化,方便对数据进行传输,同时便于后台调用;按一定方式组织起来,可以很方便地保存为文件,利于数据的保存甚至恢复。

如何使用serlalize() ?

一般来说,对某表单form进行序列化,使用很简单,一句代码:

var data = $("#applyForm").serialize(); //其中#applyForm是某form的id

不知道读者有没有留意到有这么一串数据standards=Y,N,Y,N,Y,N,Y,N,这里想说的是,上面所看到的post数据,其实是两个form的表单域组合成的,我对其中的一个主要是radio元素的值进行了字符串的split(),再提取其中的Y或者N值,最后整个form表单值通过&和另外一个链接起来……换句话说,序列化的表单域就是一个字符串,完全可以对其进行一系列字符串的操作,再使用Ajax异步请求出去。

接下来说jsonp

json和jsonp之间一个字符之差,两者之间还是挺大区别的,通常使用json此数据格式来传递数据,这里强调的是数据格式;靠jsonp跨域传值,这里强调的是跨域交换数据的协议,一种非官方的跨域交换数据的协议。跨域可以理解为:不同后台,不同领域之间的传递数据。

使用也蛮方便的,关键是使用dataType:'jsonp'来声明这种协议。

$.ajax({
          url:"http://gmpa.globalmarket.com/online/exhibitionApplyCallback.gm",
          dataType:'jsonp',         //使用jsonp
          data: data+"&standards="+standards, //上面所说的拼接
          success:function(json){
             // To do something      
          }
    });

简单总结

没有去实践,净是看,记忆不会加深,到了使用过,才会对jsonpserlalize有形象的体会,我也只是简单地介绍,以便记录我的学习积累,若需要更深入学习,还需要自行查阅更多的资料、文献,同时,欢迎讨论。

Spy 27 September 2013