最近在学习Jquery与Web Serivce,于是想想可不可以两者一起使用呢?于是开始摸索,在摸索过程中还是会发现一些问题,大家都知道无论是Web Service还是WCF返回的数据格式是XML,由于XML文件格式文件庞大、格式复杂、传输占用宽带并且服务器端与客户端解析XML花费资源和时间;而Json的数据格式比较简单、占用宽带小并且相当稳定;所以接下来我们就利用JSON格式。
1. 新建一个Web应用程序的项目,并新建 Web 服务,命名为WebService.asmx
2. 为WebService.asmx写点方法吧,下面做一个简单的方法;
注意:a) 在该Web Service中不能重载,需要确保Web Service能运行
b) 必须有 [System.Web.Script.Services.ScriptService],如果没有它,在前台页面不会调用到该服务。
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
2 using System.Collections;
3 using System.ComponentModel;
4 using System.Data;
5 using System.Linq;
6 using System.Web;
7 using System.Web.Services;
8 using System.Web.Services.Protocols;
9 using System.Xml.Linq;
10 using System.Text;
11 using System.Collections.Generic;
12
13 namespace jqueryandWCF
14 {
15 /// <summary>
16 /// WebService 的摘要说明
17 /// </summary>
18 [WebService(Namespace = " http://tempuri.org/ " )]
19 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
20 [ToolboxItem( false )]
21 // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
22 [System.Web.Script.Services.ScriptService]
23 public class WebService : System.Web.Services.WebService
24 {
25 [WebMethod]
26 public string HelloWorld( string userName)
27 {
28 return " Hello " + userName + " ! " ;
29 }
30 }
31 }
3. HTML页面,我们可以点击某一按钮时来调用该服务.
注意:1) ajax中的data:"{}"是用于传递方法中的参数,格式为:data:"{paraName:paraValue}",如果该方法无参数,则格式为:data:"{}"
2) 如果成功,我是以HTML的形式显示它的值,大家可以用其它方法,取它的值时用(result.d)
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
2
3 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
4 < html xmlns = " http://www.w3.org/1999/xhtml " >
5 < head runat = " server " >
6 < title > 无标题页 </ title >
7
8 < script src = " Scripts/jquery-1.4.1.js " type = " text/javascript " ></ script >
9
10 < script type = " text/javascript " >
11 $(document).ready(function() {
12 #region ===这段不用===
13 // 当启动ajax时显示该图片,相反就隐藏该图片
14 /*
15 $("#loading").ajaxStart(function() {
16 $(this).show();
17 })
18 $("#loading").ajaxStop(function() {
19 $(this).hide();
20 })
21 */
22 #endregion
23
24 $( " #Button1 " ).click(function() {
25 try {
26 $.ajax({
27 type: " POST " , // 访问WebService使用post方式请求
28 contentType: " application/json;utf-8 " , // WebService会返回json类型
29 url: " WebService.asmx/HelloWorld " , // 调用WebService的地址和方法名称组合
30 data: " {userName:'Jodie'} " , // 这里是要传递的参数,格式为data:"{paraName:paraValue}"
31 dataType: " json " ,
32 success: function(result) {
33 $( " #result " ).html(result.d);
34 }
35 })
36 }
37 catch (ex) {
38 alert(ex);
39 }
40 })
41 })
42
43 </ script >
44
45 </ head >
46 < body >
47 < form id = " form1 " runat = " server " >
48 < input id = " Button1 " type = " button " value = " Invoke1 " />
49 < div id = " result " >
50 < img id = " loading " style = " display: none; " alt = " loading " src = " Images/图1.bmp " />
51 </ div >
52 </ form >
53 </ body >
54 </ html >
4. 做了这么多,当然要验收一下我们结果是怎样的?