jQuery中通过ajax调用webservice传递数组参数的问题实例详解


Posted in Javascript onMay 20, 2016

下面通过实例给大家说明比较直观些,更方便大家了解。

本人的项目中通过jquery.ajax调用webservice.

客户端代码如下:

$.ajax({
url: "test/xxx.asmx",
type: 'POST',
dataType: 'xml',
timeout: ,
data: { name: "zhangsan", tags: ["aa", "bb", "cc"] },
error: function(xml) {
alert(xml.responseText);
},
success: function(xml) {
alert("OK");
}
});

服务端代码如下:

[WebMethod]
public XmlDocument xxx(string name, string [] tags )
{ 
return sth; 
}

总是抛出异常.

问题出现在这里:

下面是HTTP数据:

POST http://xxx.com/xxx.asmx/xxx HTTP/1.1
Host: center.cmis.htpc.com.cn
Connection: keep-alive
Content-Length: 55
Cache-Control: max-age=0
Origin: http://xxx.com
User-Agent: Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.186 Safari/535.1
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Accept: application/xml, text/xml, */*; q=0.01
Referer: http://xxx.com/xxx.aspx
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8
Accept-Charset: GBK,utf-8;q=0.7,*;q=0.3
name=zhangsan&tags%5B%5D=aa&tags%5B%5D=bb&tags%5B%5D=cc

而它期望的格式是如下的:

POST /xxx.asmx/xxx HTTP/1.1
Host: xxx.com
Content-Type: application/x-www-form-urlencoded
Content-Length: length
name=string&tags=string&tags=string

比较上面粗体,post的数据除了问题. 正确的应该如下:

name=zhangsan&tags=aa&tags=bb&tags=cc

看来问题出在jquery.ajax上面了.见代码(jquery.1.8.3.js)

function buildParams(prefix, obj, traditional, add) {
var name;
if (jQuery.isArray(obj)) { 
// Serialize array item.
jQuery.each(obj, function(i, v) {
if (traditional || rbracket.test(prefix)) { 
// Treat each array item as a scalar.
add(prefix, v);
} else {
// If array item is non-scalar (array or object), encode its
// numeric index to resolve deserialization ambiguity issues.
// Note that rack (as of ..) can't currently deserialize
// nested arrays properly, and attempting to do so may cause
// a server error. Possible fixes are to modify rack's
// deserialization algorithm or to provide an option or flag
// to force array serialization to be shallow.
//ytx 
buildParams(prefix, v, traditional, add);
//buildParams(prefix + "[" + (typeof v === "object" ? i : "") + "]", v, traditional, add);
}
});
} else if (!traditional && jQuery.type(obj) === "object") {
// Serialize object item.
for (name in obj) {
buildParams(prefix + "[" + name + "]", obj[name], traditional, add);
}
} else {
// Serialize scalar item.
add(prefix, obj);
}
}

结论:

出问题的代码在22行,我修改成21行那样就行了.

不过,我对js/jquery都是一知半解的,希望不要引起别的后遗症,呵呵.

以上所述是小编给大家介绍的jQuery中通过ajax调用webservice传递数组参数的问题实例详解的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 单引号 传递方法
Jun 22 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
浅析JavaScript Array和string的转换(推荐)
May 20 #Javascript
深入理解JS addLoadEvent函数
May 20 #Javascript
用jQuery获取table中行id和td值的实现代码
May 19 #Javascript
jquery遍历table的tr获取td的值实现方法
May 19 #Javascript
jquery if条件语句的写法
May 19 #Javascript
laypage分页控件使用实例详解
May 19 #Javascript
js多功能分页组件layPage使用方法详解
May 19 #Javascript
You might like
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
介绍一下grep命令的使用
2012/06/28 面试题
自荐信包含哪些内容
2013/10/30 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
计算机实训报告总结
2014/11/05 职场文书
行风评议整改报告
2014/11/06 职场文书
公司慰问信范文
2015/03/23 职场文书
公司员工奖惩制度
2015/08/04 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL