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 相关文章推荐
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
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
建立文件交换功能的脚本(三)
2006/10/09 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
Python 第一步 hello world
2009/09/25 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
2014年综治宣传月活动总结
2014/04/28 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
学校政风行风整改方案
2014/10/25 职场文书
2014年招商工作总结
2014/11/22 职场文书
离婚案件答辩状
2015/05/22 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
让世界充满爱观后感
2015/06/10 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
GO中sync包自由控制并发示例详解
2022/08/05 Golang