jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据


Posted in Javascript onFebruary 18, 2011

jQuery ajax webservice:get 和 post
一、GET 方式
客户端

var data = { classCode: "0001"}; // 这里要直接使用JOSN对象 
$.ajax({ 
type: "GET", 
contentType: "application/json; charset=utf-8", 
url: "/WebServices/ProductPropertyWebService.asmx/GetProductPropertyList", 
dataType: "json", 
anysc: false, 
data: data, 
success: RenderProperties, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
alert(errorThrown + ':' + textStatus); // 错误处理 
} 
});

服务器端
代码
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)] //UseHttpGet = true 
public List<Property> GetProductPropertyList() 
{ 
string classCode = HttpContext.Current.Request["classCode"]; // Get 方式,要在查询字符串里得到参数值 
return PropertyManager.GetPropertySet(classCode, "zh-CN").DataList; 
}

二、POST 方式
客户端
代码
var data = '{ classCode: "' + classCode + '", city: "GuangDong" }'; // 这里要使用拼接好的JOSN字符串 
$.ajax({ 
type: "POST", 
contentType: "application/json; charset=utf-8", 
url: "/WebServices/ProductPropertyWebService.asmx/GetProductPropertyList", 
dataType: "json", 
anysc: false, 
data: data, // Post 方式,data参数不能为空"",如果不传参数,也要写成"{}",否则contentType将不能附加在Request Headers中。 
success: RenderProperties, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
alert(errorThrown + ':' + textStatus); // 错误处理 
} 
});

服务器端
代码
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false)] // UseHttpGet = false 
public List<Property> GetProductPropertyList(string classCode, string city) // Post 方式,参数对应JSON字段属性,并自动赋值直接使用 
{ 
return PropertyManager.GetPropertySet(classCode, "zh-CN").DataList; 
}

注意:GET方法与POST方法不同,有参数的时候,如果参数的值不是ASCII字符(比如中文),GET的参数要encodeURI编码,要不服务端接收到的数据为乱码。
复杂的Json数据提交
简单的Json 格式的数据如 { name:Yangjun, age:27 }
复杂的Json格式的数据,其实只是Json嵌套,比如: {name:yangjun, age:27, child:[{name:yangke, age:1},{name:yangbin, age:2}]}
如果是这种复杂的Json格式的数据要提交,并在Webservices中获取,然后根据这个Json格式的字符串,序列成.net对象,应该怎么做呢?
比如我要提交下面的数据:
客户端:
代码
var productPropertyTemplate = {"ProductId":10024, "PropertyList":[ 
{"PropertyId":18, "PropertyType":"text", "PropertyValue":"号码是100"}, 
{"PropertyId":19, "PropertyType":"checkbox", "PropertyValue":"57|28"}]} 
$.ajax({ 
type: "GET", 
contentType: "application/json; charset=utf-8", 
url: "/WebServices/ProductPropertyWebService.asmx/PostProductPropertyList", 
anysc: false, 
data: { propertyList: productPropertyTemplate }, 
dataType: "json", 
success: function (result) { alert(result.d) }, 
error: function (XMLHttpRequest, textStatus, errorThrown) { 
alert(errorThrown + ':' + textStatus); 
} 
});

服务器端:
1、要反序列化Json字符为.net对象,有比较多的开源类库,我使用的是.net 3.5版本以上自带的DataContractJsonSerializer,写一个辅助类:
代码
/// <summary> 
/// Json序列化和反序列化的帮助方法 
/// </summary> 
public class JsonHelper 
{ 
/// <summary> 
/// JSON序列化:把对象序列化成Json格式的字符串 
/// </summary> 
public static string JsonSerializer<T>(T t) 
{ 
var ser = new DataContractJsonSerializer(typeof(T)); 
var ms = new MemoryStream(); 
ser.WriteObject(ms, t); 
string jsonString = Encoding.UTF8.GetString(ms.ToArray()); 
ms.Close(); 
return jsonString; 
} 
/// <summary> 
/// JSON反序列化:根据Json格式的字符串,反序列化成对象 
/// </summary> 
public static T JsonDeserialize<T>(string jsonString) 
{ 
var ser = new DataContractJsonSerializer(typeof(T)); 
var ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonString)); 
var obj = (T)ser.ReadObject(ms); 
return obj; 
} 
}

2、因为要反序列化成相应的对象,所以先构造两个对象类,注意每个类和类的字段前面的特性修改符:
代码
[DataContract] 
public class MProductProperty 
{ 
[DataMember(Order = 0, IsRequired = true)] 
public int ProductId { set; get; } 
[DataMember(Order = 1, IsRequired = true)] 
public List<MProperty> PropertyList { set; get; } 
} 
public class MProperty 
{ 
[DataMember(Order = 0, IsRequired = true)] 
public int PropertyId { set; get; } 
[DataMember(Order = 1, IsRequired = true)] 
public string PropertyType { set; get; } 
[DataMember(Order = 2, IsRequired = true)] 
public string PropertyValue { set; get; } 
}

3、接收并处理Json数据的Web方法:
代码
[WebMethod] 
[ScriptMethod(UseHttpGet = true)] 
public string PostProductPropertyList() 
{ 
string jsonString = HttpContext.Current.Request["propertyList"]; 
var productProperty = JsonHelper.JsonDeserialize<MProductProperty>(jsonString); // productProperty 成功反序列化成MProductProperty的对象 
//返回接收成功标识 
return "postsuccess"; 
}
Javascript 相关文章推荐
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
webpack打包多页面的方法
Nov 30 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 #Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 #Javascript
Jquery之美中不足小结
Feb 16 #Javascript
jquery的index方法实现tab效果
Feb 16 #Javascript
jQuery ready函数滥用分析
Feb 16 #Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 #Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 #Javascript
You might like
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
python实现的各种排序算法代码
2013/03/04 Python
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
.NET面试问题集
2015/12/08 面试题
医学专业五年以上个人求职信
2013/12/03 职场文书
个人授权委托书
2014/04/03 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
2014年环卫工作总结
2014/11/22 职场文书
三潭印月的导游词
2015/02/12 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
亮剑观后感500字
2015/06/05 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技