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 相关文章推荐
jQuery总体架构的理解分析
Mar 07 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
JSON取值前判断
Dec 23 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 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
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
python+OpenCV实现图像拼接
2020/03/05 Python
python怎么提高计算速度
2020/06/11 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
黄金搭档广告词
2014/03/21 职场文书
2014年秘书工作总结
2014/11/25 职场文书
龙门石窟导游词
2015/02/02 职场文书
天坛导游词
2015/02/02 职场文书
春晚观后感
2015/06/11 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
如何通过cmd 连接阿里云服务器
2022/04/18 Servers
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers