Mikel
[转载]Jquery读取.Net WebService Json数据 – 灵动生活 – 博客园.
鉴于上篇文章中 提到的Json优点：易读性、可扩展性和操作方便，接下来我们实现一个简单的例子Demo，场景是：查询商品信息；实现过程：Web程序通过JQuery 调用WebService，Web Service返回Json对象，成功调用后，对返回的JSon结果进行处理，下面我们看一下具体实现过程：
1、 首先创建一个Aap.net web 应用程序，如下图：
2、 添加实体类Product.cs到工程中，并且序列化，代码如下
|
[Serializable] public class Product { public long ProductId { get; set; } public string ProductName { get; set; } public decimal Price { get; set; } public int Stock { get; set; } }
|
3、 添加数据类ProductData.cs类到工程中，此类主要完成数据的查询操作，代码如下所示：
|
public class ProductData { private List<Product> productList = new List<Product>() { new Product(){ProductId=1,ProductName=”笔记本”, Price=10000M, Stock=10}, new Product(){ProductId=2,ProductName=”格子绒长袖衬衫”, Price=90M, Stock=20}, new Product(){ProductId=3,ProductName=”纯棉长袖T恤”, Price=99M, Stock=40}, new Product(){ProductId=4,ProductName=”炫彩T恤”, Price=67M, Stock=30}, new Product(){ProductId=5,ProductName=”直筒裤男牛仔裤”, Price=100M, Stock=20}, new Product(){ProductId=6,ProductName=”[无印严选]纯色V领长袖T恤”, Price=67M, Stock=50}, new Product(){ProductId=7,ProductName=”英伦学院派马夹”, Price=44M, Stock=40}, new Product(){ProductId=8,ProductName=”纯棉连帽宽松卫衣”, Price=66M, Stock=30}, new Product(){ProductId=9,ProductName=”纯棉多口袋工装裤”, Price=80M, Stock=990}, new Product(){ProductId=10,ProductName=”假两件长袖T恤”, Price=89M, Stock=30}, }; /// <summary> /// 查询所有商品 /// </summary> /// <returns>所有商品</returns> public List<Product> GetProducts() { return productList; } /// <summary> /// 根据商品Id查询商品 /// </summary> /// <param name=”id”>商品编号</param> /// <returns>商品</returns> public Product GetProductById(long id) { return productList.FirstOrDefault(p => p.ProductId == id); } /// <summary> /// 根据商品名称查询商品 /// </summary> /// <param name=”id”>商品名称</param> /// <returns>商品</returns> public List<Product> GetProductByName(string name) { return productList.Where(p => p.ProductName == name).ToList(); } |
4、 添加ASP.NET Web Service 到工程中，命名为ProductServic.asmx,如下图：
此Web Service调用ProductData类，完成数据查询操作，具体代码如下：
|
/// <summary> /// Summary description for ProductService /// </summary> [WebService(Namespace = “http://tempuri.org/”)] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class ProductService : System.Web.Services.WebService {
private ProductData dataSource { get { return new ProductData(); } }
/// <summary> /// Get the Products /// </summary> /// <returns></returns> [WebMethod] [ScriptMethod(ResponseFormat=ResponseFormat.Json,UseHttpGet=true)] public List<Product> GetProducts() { return dataSource.GetProducts(); }
/// <summary> /// 根据商品Id查询商品 /// </summary> /// <param name=”object”>商品编号</param> /// <returns>商品</returns> [WebMethod] [ScriptMethod(ResponseFormat=ResponseFormat.Json,UseHttpGet=true)] public Product GetProductById(object id) { Product p = null; if (id!=null) { int productId = 0; int.TryParse(id.ToString(),out productId); p = dataSource.GetProductById(productId); } return p; }
/// <summary> /// 根据商品名称查询商品 /// </summary> /// <param name=”id”>商品名称</param> /// <returns>商品</returns> [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)] public List<Product> GetProductById(string name) { return dataSource.GetProductByName(name); } } } |
注：
Ø 引用命名空间：System.Web.Script.Services.ScriptService
Ø 给方法添加注解：[ScriptMethod(ResponseFormat = TheResponseFormat, UseHttpGet = true/false)]
ResponseFormat：方法要返回的类型，一般为Json或者XML
UseHttpGet:true表示“Get”可以访问此方法
5、 在Defualt.aspx页面引用JQuery类库
引用Google网络jQuery 类库http://ajax.googleapis.com/ajax/libs/jQuery/1.4.2/jQuery.js
或者本地类库<script src=”Scripts/jquery-1.4.1.js” type=”text/JavaScript”></script>
6、 在Defualt.aspx页添加如下HTML代码：
|
<div id=”listContainer” class=”container”> <div id=”title”> Product List</div> <table id=”productList”> <thead> </thead> <tbody> </tbody> </table> </div> |
Jquery会动态向id=ProductList的Table中添加查询到的数据
7、 在Defualt.aspx页添加如下样式代码：
|
<style type=”text/css”> body { font-family: Verdana,Arial; } .container { width: auto; padding: 1.5em; margin: 1em; } .container #title { font-size: 2em; width: 100%; border-bottom: groove 0.5em blue; } #productList { width: 100%; border-collapse: collapse; } #productList td { padding: 1em; border-style: solid; border-width: 1px; border-color: Blue; margin: 0; } thead td { background-color: Yellow; } tbody tr:hover { background-color: #aaa; } </style> |
8、 使用Jquery的Ajax方法调用Web Service中方法，代码如下：
|
$(document).ready(function () { // Get Product list $.ajax({ type: “GET”, contentType: “application/json; charset=utf-8”, url: “ProductService.asmx/GetProducts”, dataType: “json”, success: insertCallback, error: errorCallback }); function insertCallback(result) { $(“#productList”).find(“tr:gt(0)”).remove(); if (result[“d”].length > 0) { $(‘#productList > thead:last’).append(‘<tr><td>商品名称</td><td>价格</td><td>库存量</td></tr>’); } for (var i = 0; i < result[“d”].length; i++) { var product = eval(result[“d”][i]); $(‘#productList > tbody:last’).append(‘<tr onclick=”ShowDetail(‘ + product.ProductId + ‘)”><td>’ + product.ProductName + ‘</td><td>’ + product.Price + ‘</td><td>’ + product.Stock + ‘</td></tr>’); } } function errorCallback(XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown + ‘:’ + textStatus); } |
注：
$.ajax方法有以下属性：
Type: HTTP请求方法，在做查询操作时，经常用Get方法
contentType:在请求头部的类型，由于Web Service返回Json对象，此处值为：application/json; charset=utf-8
ｄａｔａＴｙｅｐ：定义返回的类型
Success：调用成功时，要执行的方法
ｅｒｒｏｒ：调用失败是，要执行的方法
9、 执行程序，效果如下：
至此，使用Ｊｑｕｅｒｙ查询Ｗｅｂ Ｓｅｒｖｉｃｅ返回的ＪＳｏｎ对象已经完成
