[入门篇]Jquery读取.Net WebService Json数据

public class ProductData

4、 添加ASP.NET Web Service 到工程中，命名为ProductServic.asmx,如下图：

此Web Service调用ProductData类，完成数据查询操作，具体代码如下：

注：

Ø 引用命名空间：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>

Jquery会动态向id=ProductList的Table中添加查询到的数据

7、 在Defualt.aspx页添加如下样式代码：

8、 使用Jquery的Ajax方法调用Web Service中方法，代码如下：

$(document).ready(function () {

注：

$.ajax方法有以下属性：

Type:    HTTP请求方法，在做查询操作时，经常用Get方法

contentType:在请求头部的类型，由于Web Service返回Json对象，此处值为：application/json; charset=utf-8

url:请求的ＵＲＬ地址

ｄａｔａＴｙｅｐ：定义返回的类型

Success：调用成功时，要执行的方法

ｅｒｒｏｒ：调用失败是，要执行的方法

9、 执行程序，效果如下：

至此，使用Ｊｑｕｅｒｙ查询Ｗｅｂ　Ｓｅｒｖｉｃｅ返回的ＪＳｏｎ对象已经完成