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 相关文章推荐
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
React-router4路由监听的实现
Aug 07 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 Javascript
js实现菜单跳转效果
Dec 11 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
做个自己站内搜索引擎
2006/10/09 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
Python实现将xml导入至excel
2015/11/20 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
任课老师推荐信范文
2013/11/24 职场文书
诚信考试倡议书
2014/04/15 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android