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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
JS高级笔记
Jul 13 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 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
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
JS控制表格隔行变色
2006/06/26 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
基于python的字节编译详解
2017/09/20 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
python适合做数据挖掘吗
2020/06/16 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
构造器Constructor是否可被override?
2013/08/06 面试题
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
仓库文员岗位职责
2014/04/06 职场文书
学历公证书范本
2014/04/09 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
教师求职自荐信
2015/03/26 职场文书
居安思危观后感
2015/06/11 职场文书
2015年工会工作总结范文
2015/07/23 职场文书