温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
一。使用get方式1.前台& & & & & & //复杂json对象提交& & & & & & var person = {'per':"{ 'id': 1, 'name': '张三', 'sex': '男' }"};& & & & & & $.ajax({& & & & & & & & type: "get",& & & & & & & & url: "JsonObject.asmx/GetPersonByObject",& & & & & & & & data: person,& & & & & & & & dataType: 'json',& & & & & & & & contentType: 'application/charset=utf-8',& & & & & & & & success: function (data) {& & & & & & & & & & if (data.d == "1") {& & & & & & & & & & & & $("#hello").text("服务器接收成功！");& & & & & & & & & & }& & & & & & & & & & else {& & & & & & & & & & & & $("#hello").text("服务器接收数据失败！");& & & & & & & & & & }& & & & & & & & },& & & & & & & & error: function () {& & & & & & & & & & $("#hello").text("程序运行出错！");& & & & & & & & }& & & & & & });2.后台& & & & [WebMethod]& & & & [ScriptMethod(ResponseFormat=ResponseFormat.Json, UseHttpGet=true)]& & & & public string GetPersonByObject()& & & & {& & & & & & string jsonStr = HttpContext.Current.Request["per"];& & & & & & Person per = jsonStr.JsonDeserialezer&Person&();//将json字符串反序列化& & & & & & if (per.Id == 1)& & & & & & {& & & & & & & & return "1";& & & & & & }& & & & & & return "0";& & & & }二。使用post方式1.前台& & & & & & var person = "{'per':\"{ 'id': 1, 'name': '张三', 'sex': '男' }\"}";& & & & & & $.ajax({& & & & & & & & type: "post",& & & & & & & & url: "JsonObject.asmx/GetPersonByObject",& & & & & & & & data: person,& & & & & & & & dataType: 'json',& & & & & & & & contentType: 'application/charset=utf-8',& & & & & & & & success: function (data) {& & & & & & & & & & if (data.d == "1") {& & & & & & & & & & & & $("#hello").text("服务器接收成功！");& & & & & & & & & & }& & & & & & & & & & else {& & & & & & & & & & & & $("#hello").text("服务器接收数据失败！");& & & & & & & & & & }& & & & & & & & },& & & & & & & & error: function () {& & & & & & & & & & $("#hello").text("程序运行出错！");& & & & & & & & }& & & & & & });2.后台& & & & [WebMethod]& & & & public string GetPersonByObject(string per)& & & & {& & & & & Person person= & per.JsonDeserialezer&Person&();//将json反序列化& & & & & if (person.Id == 1)& & & & & {& & & & & & & return "1";& & & & & }& & & & & & return "0";& & & & }三。List类型json提交，post方式1.前台& & & & & & //复杂json对象提交2
& & & & & & var person = "{'per':\"[{ 'id': 1, 'name': '张三', 'sex': '男' },{ 'id': 2, 'name': '王芳', 'sex': '女' }]\"}";& & & & & & $.ajax({& & & & & & & & type: "post",& & & & & & & & url: "JsonObject.asmx/GetPersonByOjects",& & & & & & & & data: person,& & & & & & & & dataType: 'json',& & & & & & & & contentType: 'application/charset=utf-8',& & & & & & & & success: function (data) {& & & & & & & & & & & & $("#hello").text("就收前台数据人数:"+data.d);& & & & & & & & },& & & & & & & & error: function () {& & & & & & & & & & $("#hello").text("程序运行出错！");& & & & & & & & }& & & & & & });2.后台& & & & [WebMethod]& & & & public int GetPersonByOjects(string per)& & & & {& & & & & & List&Person& list = per.JsonDeserialezer&List&Person&&();//反序列化json字符串& & & & & & return list.C& & & & }四。List类型json提交，get方式1.前台& & & & & & var person = {'per':"[{ 'id': 1, 'name': '张三', 'sex': '男' },{ 'id': 2, 'name': '王芳', 'sex': '女' }]"};& & & & & & $.ajax({& & & & & & & & type: "get",& & & & & & & & url: "JsonObject.asmx/GetPersonByOjects",& & & & & & & & data: person,& & & & & & & & dataType: 'json',& & & & & & & & contentType: 'application/charset=utf-8',& & & & & & & & success: function (data) {& & & & & & & & & & & & $("#hello").text("就收前台数据人数:"+data.d);& & & & & & & & },& & & & & & & & error: function () {& & & & & & & & & & $("#hello").text("程序运行出错！");& & & & & & & & }& & & & & & });2.后台& & & & [WebMethod]& & & & [ScriptMethod(ResponseFormat=ResponseFormat.Json,UseHttpGet=true)]& & & & public int GetPersonByOjects()& & & & {& & & & & & string per = HttpContext.Current.Request["per"];& & & & & & List&Person& list = per.JsonDeserialezer&List&Person&&();& & & & & & return list.C& & & & }
阅读(9319)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'Jquery Ajax 复杂json对象提交到WebService',
blogAbstract:'一。使用get方式1.前台& & & & & & //复杂json对象提交& & & & & & var person = {\'per\':\"{ \'id\': 1, \'name\': \'张三\', \'sex\': \'男\' }\"};& & & & & & $.ajax({& & & & & & & & type: \"get\",& & & & & & & & url: \"JsonObject.asmx/GetPersonByObject\",& & & & & & & & data: person,& & & & & & & & dataType: \'json\',& & &',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:4,
publishTime:2,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:1,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}网站已改版，请使用新地址访问：
JsonListTest 对一个js对象进行post请求的键值对处理，主要用户ajax 上传 与集合用
238万源代码下载-
&文件名称: JsonListTest
& & & & &&]
&&所属分类:
&&开发工具: JavaScript
&&文件大小: 457 KB
&&上传时间:
&&下载次数: 2
&&提 供 者:
&详细说明：对一个js对象进行post请求的键值对处理，主要用户ajax请求上传对象与集合用-Post a request for a js object keys of processing, the main user ajax request upload objects and collections with
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&JsonListTest&&............\bin&&............\...\JsonListTest.dll&&............\...\JsonListTest.pdb&&............\Content&&............\.......\Site.css&&............\.......\themes&&............\.......\......\base&&............\.......\......\....\images&&............\.......\......\....\......\ui-bg_flat_0_aaaaaa_40x100.png&&............\.......\......\....\......\ui-bg_flat_75_ffffff_40x100.png&&............\.......\......\....\......\ui-bg_glass_55_fbf9ee_1x400.png&&............\.......\......\....\......\ui-bg_glass_65_ffffff_1x400.png&&............\.......\......\....\......\ui-bg_glass_75_dadada_1x400.png&&............\.......\......\....\......\ui-bg_glass_75_e6e6e6_1x400.png&&............\.......\......\....\......\ui-bg_glass_95_fef1ec_1x400.png&&............\.......\......\....\......\ui-bg_highlight-soft_75_cccccc_1x100.png&&............\.......\......\....\......\ui-icons_x240.png&&............\.......\......\....\......\ui-icons_2e83ff_256x240.png&&............\.......\......\....\......\ui-icons_x240.png&&............\.......\......\....\......\ui-icons_x240.png&&............\.......\......\....\......\ui-icons_cd0a0a_256x240.png&&............\.......\......\....\jquery-ui.css&&............\Controllers&&............\...........\JsonTestController.cs&&............\Global.asax&&............\Global.asax.cs&&............\JsonListTest.csproj&&............\JsonListTest.csproj.user&&............\Models&&............\......\School.cs&&............\obj&&............\...\Debug&&............\...\.....\DesignTimeResolveAssemblyReferencesInput.cache&&............\...\.....\JsonListTest.csproj.FileListAbsolute.txt&&............\...\.....\JsonListTest.dll&&............\...\.....\JsonListTest.pdb&&............\...\.....\TempPE&&............\Properties&&............\..........\AssemblyInfo.cs&&............\Scripts&&............\.......\jquery-1.4.4-vsdoc.js&&............\.......\jquery-1.4.4.js&&............\.......\jquery-1.4.4.min.js&&............\.......\jquery-ui.js&&............\.......\jquery-ui.min.js&&............\.......\jquery.unobtrusive-ajax.js&&............\.......\jquery.unobtrusive-ajax.min.js&&............\.......\jquery.validate-vsdoc.js&&............\.......\jquery.validate.js&&............\.......\jquery.validate.min.js&&............\.......\jquery.validate.unobtrusive.js&&............\.......\jquery.validate.unobtrusive.min.js&&............\.......\json.js&&............\.......\MicrosoftAjax.debug.js&&............\.......\MicrosoftAjax.js&&............\.......\MicrosoftMvcAjax.debug.js&&............\.......\MicrosoftMvcAjax.js&&............\.......\MicrosoftMvcValidation.debug.js&&............\.......\MicrosoftMvcValidation.js&&............\.......\pp.js&&............\Views&&............\.....\JsonTest&&............\.....\........\Index.cshtml&&............\.....\Shared&&............\.....\......\Error.cshtml&&............\.....\......\_Layout.cshtml&&............\.....\Web.config&&............\.....\_ViewStart.cshtml&&............\Web.config&&............\Web.Debug.config&&............\Web.Release.config
&输入关键字，在本站238万海量源码库中尽情搜索：
&[] - VB 计算机网络连接管理，可以查看网络连接情况
&[] - 主要用java编写定义一个商品类，在此基础上定义了一个食品类和服装子类，利用java的继承和多态性URL对象 ajax(object)
URL对象 ajax(object)
这是一个Ajax调用的基础方法. 程序根据传入的object参数所拥有的属性进行相应的AJAX请求.
object 为一个对象类型的参数,此对象可选属性字段如下表:
注意：下表中的函数：beforeSend, complete, success, error的内部对象&this&均指向当前的URL对象。
&POST&或&GET&(不区分大小写)，指定发送AJAX请求的方法类型。
　　对于GET请求，提交的所有数据变量都将以"名称=值&名称=值"的形式附加到URL地址后面进行发送；
　　对于POST请求，除通过构造方法传入的数据变量仍然附加到URL地址后面以外，其它调用set或sel等方法设置进来的数据变量，都将以POST方式发送（注意：如果调用set或sel等方法所设置的变量名在构造方法传入的地址中已经存在，即程序只是修改了这个变量，它将仍然附加在URL地址中进行发送）。
　　如果不指此参数，程序将根据构造方法和相关SET方法传入的参数进行自动选择，选择方式是：如果此URL对象除了构造方法传进来的那些参数变量名称序列之外，用户没有再另外SET其它数据变量，那么将以GET方式发送请求，否则如果还SET了其它名称的参数变量，则以POST方式发送请求。(请见本页下面的)
如果服务器支持，除POST或GET以外的其它类型的请求也是可以的。
请求返回的数据类型，可取值（不区分大小写）：
&html&: 指示返回数据类型为HTML字符串（默认值）。
&xml& : 指示返回数据类型为一个XML文档。
&json&: 指示返回的数据类型为一个JSON 脚本对象。
&script&: 指示返回的数据类型为一个js脚本，该脚本将被执行。
指示是否以异步的方式调用AJAX(默认为true，代表异步请求)。
　　当指定为同步请求时，回调函数没有意义(如果指定了回调函数，该函数不会执行)。如果同步请求时指定了参数type值为"script"，在返回xmlHttp对象之前，请求响应的结果字符串会当作脚本代码先被执行。
　　强烈建议不要采用同步方式，因为在同步请求的过程中，如服务器响应太慢，将会造成浏览器窗口卡死，直到同步请求结束。这绝对不是一个良好的用户体验。
指示是否缓存数据（默认为true）。
一般情况下，请求总能够被发送出去，但浏览器有可能从它的缓存中调取数据。通过设置此属性值为false，来禁用浏览器缓存，以使每次的请求都从服务器上读取。
ifModified
指示是否仅在服务器端内容变更时获取数据(默认为false)。
程序将检查Last-Modified和Etag头信息,确定服务器端内容是否被修改过.
对于需要频繁访问或有大量数据传输的AJAX请求,通过设置此属性值为true, 并在回调函数中检查参数的值,仅在服务器变更时获取和处理数据,将极大节省数据传输量,加快请求响应时间.
一个大于或等于0的整数,用于指定请求超时时间,(默认值)为0表示不指定超时时间.
当请求超时后,程序将中止该AJAX请求,并执行error回调函数(状态=&timeout&).
指定发送至服务器的编码类型，默认值&application/x-www-form-urlencoded&适用大多数情况。
如果URL地址资源需要用户名/密码认证，此参数用于指定认证用户名。
如果URL地址资源需要用户名/密码认证，此参数用于指定认证密码。
自定义要发送给服务器端的数据。如果指定了此参数，在此之前set的数据都将附加到URL地址后面，XMLHttpRequest将只send此处指定的数据内容。例如，需要发送一个XML文档给服务器，而不是传统的POST字符串，您可以在此指定要发送的XML Document对象。
beforeSend
function(xhr)
在发送请求之前调用此函数，此函数接受一个参数xhr，该参数是对XMLHttpRequest对象的引用。您可以在请求发送之前修改XMLHttpRequest对象，例如添加自定义的HTTP头。
如果此函数明确地返回false,将取消此AJAX请求。
function(d,state)
回调函数: 当(异步)请求成功时调用此函数。
此函数接收两个参数，第一个参数d代表请求返回的数据(数据类型由&&所指定)；第二个参数为请求响应结果的字符串状态(可能返回的字符串状态见下表)。
function(xhr,state)
回调函数: 当(异步)请求失败时调用此函数。
此函数接收两个参数，第一个参数xhr是对XMLHttpRequest对象的引用,第二个参数为请求响应结果的字符串状态(可能返回的字符串状态见下表)。
function(xhr,state)
回调函数: 当(异步)请求完成时调用此函数。无论请求成功还是失败，此函数都将被调用。
此函数接收两个参数，第一个参数xhr是对XMLHttpRequest对象的引用,第二个参数为请求响应结果的字符串状态(可能返回的字符串状态见下表)。
state状态值
下表列出了AJAX回调函数(complete, success, error)中的state参数,可能返回的字符串状态.
其中&出现位置&指: 该状态值只会出现在在指定的回调函数中.
状态值(字符串)
success, complete
AJAX请求成功,并且正常返回了服务器端的数据内容.
notmodified
success, complete
AJAX请求成功,但由于服务器端数据内容没有更改,本次仅返回了响应头内容,无返回数据.
error, complete
AJAX请求失败,服务器端发生错误. 您可以通过xhr.status获取服务器端返回的错误状态码.
error, complete
AJAX请求操时.(操时时间由上表的属性定义.)
parsererror
error, complete
AJAX请求返回的不是一个正确的XML文档.
当设置=&xml&,且返回的数据不是一个有效的XML文档时,将出现此状态信息.
对于异步操作(=true)时,没有返回值；
对于同步操作,将始终返回发送请求的XmlHttpRequest对象本身（可以通过xmlHttpRequest对象的responseText属性，获取响应结果字符串）。同时，如果在发送请求时指定了参数type的值为"script",在返回之前，同步请求响应的结果字符串会当作脚本先被执行。
加载并执行一个JS文件。
JSer.url(&test.js&).ajax({
&&& type:&script&
　　特别注意下面代码中四个数据变量传递方式的区别：Act和add仍跟在url地址后面进行发送(Act=save&add=2)；而后面的set方法所设置的两个数据变量name和age将以POST的方式发送！
　　这是因为JSer规定（见本页上面的参数表中的说明）：当以POST发送请求时，除通过构造方法传进来的那些数据变量之外（例如这儿的Act和add），其它通过调用set或sel进来的变量都将以POST的方式发送.
　　虽然代码中也调用set方法设置了一个add=2的数据变量，但它并没有以POST方式发送，因为它在构造方法传入的地址中已经存在，此时set方法做的事情仅仅是修改了构造方法中的add变量的值。
　　另外值得向大家提一下，在这种情况下，由于“除通过构造方法传入的数据变量之外，还通过set方法设置了其它的数据变量（即这里的name, age）”条件成立，因此，即使不指定method参数，程序也将以POST方式发送（即可以省略掉method）。而省掉method后，剩下的就只有一个success了，而这又可以使用URL对象的方法来替代，使代码更加简洁。
JSer.url(&action.do?Act=save&add=1&).set({name:'张三', age:18})).set("add", 2).ajax({
&&& method:&post&,
&&& success:function(d){
&&&&&&& alert(&return data:& + d);
保存数据到数据库，成功后显示结果信息。
JSer.url(&save.do&).sel(&:input&).ajax({
&&& method:&post&,
&&& success:function(d){
&&&&&&& alert(&return data:& + d);
仅在服务器端数据发生更改时载入数据。
JSer.url(&list.do?cid=3&).ajax({
&&& ifModified:true,
&&& success:function(d, state){
&&&&&&& if(state=='success'){
&&&&&&&&&&& JSer(&#infoDIV&).html(d);
同步方式请求数据。发送请求时将锁住浏览器。在需要锁定用户交互操作时，采用同步操作。
var html = JSer.url(&test.do&).ajax({
&&& async:false
}).responseText;
探测服务器的类型。只需要发送一个HEAD请求即可（HEAD请求只会返回响应头部信息，不会发送消息主体）。
JSer.url(&test.html&).ajax({
&&& method:&head&,
&&& complete: function(xhr){
&&&&&&& alert(xhr.getResponseHeader(&Server&));
向服务器发送一个XML文档内容。
JSer.url(&saveXml.Servlet&).ajax({
&&& method:&POST&,
&&& send: '&?xml version=&1.0& encoding=&utf-8&?&&root&&content&only a test&/content&&/root&',
&&& success: function(d){
&&&&&&& alert(d);
我们以Java Servlet为例，说明服务器端接收XML的示例代码：
Java Servlet代码片段:
import java.io.*;
BufferedReader in = request.getReader();
String realPath = request.getServletContext().getRealPath(&/saved-data.txt&);
File f = new File(realPath);
FileWriter fw = new FileWriter(realPath);
BufferedWriter bw = new BufferedWriter(fw);
&&& while ((line = in.readLine()) != null) {
&&&&&& out.println(line);
&&&& & bw.write(line);
&&&&&& bw.newLine();
&&& bw.close();
&&& fw.close();
&&& out.print(&saved data ok!&);
} catch (Exception e) {
&&& e.printStackTrace();
&&& out.println(&Mission Completed&);23701人阅读
Javascript（19）
POST方式发送ajax请求详解
原文地址：
& & & & 在开始讲解之前，我假设你已经对ajax的基本原理有一定的理解，如果还有哪位朋友不怎么了解的话，
请点击这里：
①post和get
& & & & 首先我们先讲解下post和get发送方式的特点， GET 方法提交数据不安全，数据置于请求行，客户端地址栏可见; GET 方法提交的数据大小限制在255 个字符之内。为了验证以上说法，我们接下来做个试验。首先看如下代码：
Html代码&&
&!DOCTYPE&HTML&PUBLIC&&-//W3C//DTD&HTML&4.0&Transitional//EN&&&
test-get_post&&
&name=&Login&&method=&get&&action=&test.jsp&&&
User&ID:&&type=&text&&name=&name&&&
Password:&&type=&password&&name=&password&&&
&type=&HIDDEN&&name=&from&&value=&welcome&&&
&type=&submit&&value=&submit&&&
&接着我们输入一些数据，然后点击submit，如下图：
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 图1-1
&接下来我们再来看一下提交的这个http请求的详细信息：
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 图1-2
&由于上图我们可以看出，使用get方式发送的http请求，参数都是直接跟在URL后面清晰可见的，而且我们也不难看出，该http请求的body部分也是空的，只有head部分显示了一个http的基本信息。关于 GET 方法提交的数据大小是否限制在255 个字符之内，这里就不再做实验了，大家可以自己去实验。
接下来我们来看看POST 方法是如何提交数据的，POST方法提交的数据置于消息主体内，客户端不可见， POST 方法提交的数据大小没有限制。我们对以上html稍做修改如下：
Html代码&&
&!DOCTYPE&HTML&PUBLIC&&-//W3C//DTD&HTML&4.0&Transitional//EN&&&
test-get_post&&
&name=&Login&&method=&Post&&action=&test.jsp&&&
User&ID:&&type=&text&&name=&name&&&
Password:&&type=&password&&name=&password&&&
&type=&HIDDEN&&name=&from&&value=&welcome&&&
&type=&submit&&value=&submit&&&
&接着我们输入一些数据，然后点击submit，如下图：
接下来我们再来看一下提交的这个http请求的详细信息：
由上图我们可以看出，使用post方式发送的http请求，参数不是跟在URL后面的，而是存放在http请求的body部分的，关于请求参数在http请求body中存放的形式类似get方式，见下图：
&②进入正题
在简单的讲述了get和post方式的特点后，我们正式进入正题，即如何以post形式向server发送ajax请求，在发送请求之前，第一个我们需要解决的问题就是如何去搜集并组织指定form表单中的数据。
一般来说form中存放数据的控件主要是&input&，而这个&input&type很多，如‘submit’，‘hidden’， ‘password’， ‘text’，‘checkbox’， ‘radio’等。因此第一步我们要做的就是先写一个方法，将将form中各种类型的&input&将数据值给抠出来。具体见如下代码：
function&getElements(formId)&{&&
&&&&var&form&=&document.getElementById(id);&&
&&&&var&elements&=&new&Array();&&
&&&&var&tagElements&=&form.getElementsByTagName('input');&&
&&&&for&(var&j&=&0;&j&&&tagElements.&j++)&&
&&&&&&&&elements.push(tagElements[j]);&&
&&&&return&&&
接着我们需要获取每个input对象的name-value对，代码如下：
function&inputSelector(element)&{&&
&&if&(element.checked)&&
&&&&&return&[element.name,&element.value];&&
function&input(element)&{&&
&&&&switch&(element.type.toLowerCase())&{&&
&&&&&&case&'submit':&&
&&&&&&case&'hidden':&&
&&&&&&case&'password':&&
&&&&&&case&'text':&&
&&&&&&&&return&[element.name,&element.value];&&
&&&&&&case&'checkbox':&&
&&&&&&case&'radio':&&
&&&&&&&&return&inputSelector(element);&&
&&&&return&false;&&
接着我们就可以将所有这些input对象中的name-value对以图1-5中POSTDATA那样的格式组织起来。代码如下：
function&serializeElement(element)&{&&
&&&&var&method&=&element.tagName.toLowerCase();&&
&&&&var&parameter&=&input(element);&&
&&&&if&(parameter)&{&&
&&&&&&var&key&=&encodeURIComponent(parameter[0]);&&
&&&&&&if&(key.length&==&0)&return;&&
&&&&&&if&(parameter[1].constructor&!=&Array)&&
&&&&&&&&parameter[1]&=&[parameter[1]];&&
&&&&&&var&values&=&parameter[1];&&
&&&&&&var&results&=&[];&&
&&&&&&for&(var&i=0;&i&values.&i++)&{&&
&&&&&&&&results.push(key&+&'='&+&encodeURIComponent(values[i]));&&
&&&&&&return&results.join('&');&&
function&serializeForm(formId)&{&&
&&&&var&elements&=&getElements(formId);&&
&&&&var&queryComponents&=&new&Array();&&
&&&&for&(var&i&=&0;&i&&&elements.&i++)&{&&
&&&&&&var&queryComponent&=&serializeElement(elements[i]);&&
&&&&&&if&(queryComponent)&&
&&&&&&&&queryComponents.push(queryComponent);&&
&&&&return&queryComponents.join('&');&&
接下来我们来创建一个form表单，里面包含各种input控件，代码如下：
Html代码&&
&!DOCTYPE&HTML&PUBLIC&&-//W3C//DTD&HTML&4.0&Transitional//EN&&&
%@page&import=&java.util.Enumeration&%&&
test-get_post&&
&src=&demo.js&&type=&text/javascript&&&
&type=&text/javascript&&&
var&request&=&getXMLHttpRequest();&&
function&getFormInfo()&{&&
&&&&var&postBody&=&serializeForm('Login');&&
&&&&var&url&=&document.getElementById('Login').&&
&&&&request.open(&post&,&url,&true);&&
&&&&request.onreadystatechange&=&updatePage;&&
&&&&request.setRequestHeader('Content-type',&'application/x-www-form-urlencoded');&&
&&&&request.send(postBody);&&
function&updatePage()&{&&
&&&&if&(request.readyState&==&4)&{&&
&&&&if&(request.status&==&200)&{&&
&&&&var&response&=&request.responseT&&
&&&&&&&&alert(response);&&
&&&&}&else&&
&&&&&&&&alert(&status&is&&&+&request.status);&&
&id=&Login&&name=&Login&&method=&post&&action=&result.jsp&&&
User&ID:&&type=&text&&name=&name&&&
Password:&&type=&password&&name=&password&&&
sex:&type=&radio&&name=&sex&&value=&man&&man&
&type=&radio&&name=&sex&&value=&woman&&woman&&
interest:&type=&checkbox&&name=&interest&&value=&piu&PIU&
&type=&checkbox&&name=&interest&&value=&dss&DSS&
&type=&checkbox&&name=&interest&&value=&ddr&DDR&&
&type=&hidden&&name=&from&&value=&welcome&&&
&type=&button&&name=&submit&&value=&submit&&onclick=&getFormInfo();&&&
另外值得注意的是，上述代码这句:
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
非常重要，没有这句的话，server就无法正常读取postdata中的任何数据，因为如果在 HTTP 流中传递空白和标点之类的字符，则它们在接收端可能会被错误地解释。URL 编码将 postdata 中不允许使用的字符转换为等效字符实体；URL 解码会反转此编码过程。例如，当嵌入到要在 URL 中传输的文本块中时，字符 & 和 & 分别被编码为 %3c 和 %3e。
接着我看一下接收端result.jsp的代码：
Html代码&&
&version=&1.0&&encoding=&ISO-8859-1&&&&
%@page&import=&java.util.Enumeration&%&&
%@&page&language=&java&&contentType=&text/&charset=ISO-8859-1&&pageEncoding=&ISO-8859-1&%&&
&&&&String&name&=&request.getParameter(&name&);&&
&&&&String&pwd&=&request.getParameter(&password&);&&
&&&&String&sex&=&request.getParameter(&sex&);&&
&&&&String[]&interest&=&request.getParameterValues(&interest&);&&
&&&&String&from&=&request.getParameter(&from&);&&
&&&&%=name&%&&
&&&&%=pwd&%&&
&&&&%=sex&%&&
&&&&&&&&for&(int&i=0;&i;&i++)&&
&&&&&&&&&&&&out.print(interest[i]&+&&&&);&&
&&&&%=from&%&&
&最后，我们点击submit，看一下输出结果：
& & & & & & & 到这里就差不多结束了，希望这篇文章能给大家带来一些帮助和启发，谢谢大家观赏。最后附上源码，源码大家去博主原文地址下载：
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1845234次
积分：14959
积分：14959
排名：第780名
原创：200篇
转载：198篇
评论：166条
(1)(1)(1)(1)(1)(2)(14)(8)(10)(21)(44)(14)(6)(17)(20)(62)(31)(11)(50)(12)(10)(7)(13)(12)(3)(10)(9)(7)}