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实现iframe动态调整高度的代码
Jan 06 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
JavaScript实现网页跨年倒计时
Dec 02 Javascript
JS canvas实现画板和签字板功能
Feb 23 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入门速成(2)
2006/10/09 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
js以对象为索引的关联数组
2010/07/04 Javascript
js自定义事件代码说明
2011/01/31 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
Vue js with语句原理及用法解析
2020/09/03 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
简介Django中内置的一些中间件
2015/07/24 Python
python3抓取中文网页的方法
2015/07/28 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Python实现GIF图倒放
2020/07/16 Python
Django数据库迁移常见使用方法
2020/11/12 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
伊琍体标语
2014/06/25 职场文书
出国签证在职证明
2014/09/20 职场文书
新年晚会开场白
2015/05/29 职场文书
大学生见习总结报告
2015/06/24 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
python在package下继续嵌套一个package
2022/04/14 Python