[转载]Jquery调用Web Service

[转载]Jquery调用Web Service – 琴韵之弦 – 博客园.

最近在学习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],如果没有它，在前台页面不会调用到该服务。

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Text;
using System.Collections.Generic;

namespace jqueryandWCF
{
///
/// WebService 的摘要说明
///
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld(string userName)
{
return "Hello " + userName +" !";
}
}
}

3. HTML页面，我们可以点击某一按钮时来调用该服务.

注意：1） ajax中的data:”{}”是用于传递方法中的参数，格式为：data:”{paraName:paraValue}”,如果该方法无参数，则格式为：data:”{}”

2） 如果成功，我是以HTML的形式显示它的值，大家可以用其它方法，取它的值时用(result.d)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jqueryandWCF._Default" %>


无标题页

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript">// <!&#91;CDATA&#91;
 $(document).ready(function() {
 #region ===这段不用===
 //当启动ajax时显示该图片，相反就隐藏该图片
 /*
 $("#loading").ajaxStart(function() {
 $(this).show();
 })
 $("#loading").ajaxStop(function() {
 $(this).hide();
 })
 */
 #endregion

 $("#Button1").click(function() {
 try {
 $.ajax({
 type: "POST", //访问WebService使用post方式请求
 contentType: "application/json;utf-8", //WebService会返回json类型
 url: "WebService.asmx/HelloWorld", //调用WebService的地址和方法名称组合
 data: "{userName:'Jodie'}", //这里是要传递的参数，格式为data:"{paraName:paraValue}"
 dataType: "json",
 success: function(result) {
 $("#result").html(result.d);
 }
 })
 }
 catch (ex) {
 alert(ex);
 }
 })
 })
// &#93;&#93;></script>

<form id="form1"> <input id="Button1" type="button" value="Invoke1" />
<div id="result"><img id="loading" style="display: none;" src="Images/图1.bmp" alt="loading" /></div>
</form>

4. 做了这么多，当然要验收一下我们结果是怎样的？