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 相关文章推荐
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
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
ip签名探针
2006/10/09 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
深入解析Python中的线程同步方法
2016/06/14 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
python删除过期log文件操作实例解析
2018/01/31 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
安全教育心得体会
2013/12/29 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书