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方法分享
Sep 10 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
JS高级程序设计之class继承重点详解
Jul 07 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读取和编写XML DOM的实现代码
2011/02/03 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
js实现微博发布小功能
2017/01/12 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
Python中实现参数类型检查的简单方法
2015/04/21 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
机器学习python实战之决策树
2017/11/01 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
乡镇干部先进事迹材料
2014/02/03 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
华山导游词
2015/02/03 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL