首页 > 编程 > JavaScript > 正文

jQuery 调用WebService 实例讲解

2019-11-20 09:35:29
字体:
来源:转载
供稿:网友

1.首先建一个WebService程序

/// <summary>/// WebService1 的摘要说明/// </summary>[WebService(Namespace = "http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][ToolboxItem(false)]// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。[System.Web.Script.Services.ScriptService]public class WebService1 : System.Web.Services.WebService{ [WebMethod] public string HelloWorld() {  CommonData.Json.ObjectSerialization ser = new CommonData.Json.ObjectSerialization();  Student stu = new Student();  stu.Id = 1;  stu.Name = "hechen";  string json = ser.EntityToJson(stu);  return json; }}

  [System.Web.Script.Services.ScriptService] 这里得注意,默认情况下这个特性是注释起来的,如果想用Javascript来调用WebService 就要取消这个注释

  WebService 的内容不必多说,用Jquery调用WebService 返回肯定是一个xml。而xml是说明文件,而不是具体方法返回的值,所以我们做适当的处理。我们这里WebService方法返回的是JSON数据,以便在前台解析。下载是实体类序列化JSON的代码。

2. 实体对象序列化JSON

/** *  * 2009-5-26 * 贺  臣 *  * 将某个对象转化为Json数据格式 * */using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.IO;using System.Data;using System.ServiceModel.Web;using System.Runtime.Serialization;using System.Runtime.Serialization.Json;namespace CommonData.Json{ public class ObjectSerialization {  private object _entity;  /// <summary>  /// 被序列化得实体对象  /// </summary>  public object Entity  {   get { return _entity; }   set { _entity = value; }  }  private string _jsonData;  /// <summary>  /// 被转化为json格式数据的对象  /// </summary>  public string JsonData  {   get { return _jsonData; }   set { _jsonData = value; }  }  /// <summary>  /// 无参数构造方法  /// </summary>  public ObjectSerialization()  {   }  /// <summary>  /// 有参数构造方法  /// </summary>  /// <param name="entity">要被序列化得实体对象</param>  public ObjectSerialization(object entity)  {   this._entity = entity;  }  /// <summary>  /// 序列化实体对象  /// </summary>  /// <returns></returns>  public string EntityToJson()  {   var serializer = new DataContractJsonSerializer(Entity.GetType());   MemoryStream ms = new MemoryStream();   serializer.WriteObject(ms, Entity);   byte[] myByte = new byte[ms.Length];   ms.Position = 0;   ms.Read(myByte, 0, (int)ms.Length);   string dataString = Encoding.UTF8.GetString(myByte);   return dataString;  }  /// <summary>  /// 序列化实体对象  /// </summary>  /// <param name="entity">要被序列化得实体对象</param>  /// <returns></returns>  public string EntityToJson(object entity)  {   this._entity = entity;   return EntityToJson();  }  /// <summary>  /// 将Json格式数据转换为对象  /// </summary>  /// <returns></returns>  public T GetObjectJson<T>()  {   MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(JsonData));   var serializer = new DataContractJsonSerializer(typeof(T));   T t = (T)serializer.ReadObject(ms);   return t;  }  /// <summary>  /// 将Json格式数据转换为对象  /// </summary>  /// <param name="jsonData">json数据格式</param>  /// <returns></returns>  public T GetObjectJson<T>(string jsonData)  {   this._jsonData = jsonData;   return GetObjectJson<T>();  } }}

  注意序列化实体必须用可序列化特性修饰,如Serialiable,否则它不能序列化为JSON数据字符串

3.前台程序Jquery调用

<script src="jquery-1[1].2.3.min.js" type="text/javascript"></script><script src="json2.js" type="text/javascript"></script><script type="text/javascript"> $(document).ready(function() { $("#btnClick").click(function() {   $.ajax({    url:"http://localhost:10168/WebService1.asmx/HelloWorld",    beforeSend: function(x) {            x.setRequestHeader("Content-Type", "application/json; charset=utf-8");          },    data:{},    dataType:"json",    type:"POST",    error: function(x, e) {           alert(x.responseText);         },        complete: function(x) {            //alert(x.responseText);           } ,    success:function(data){     var msg=data.d;     var json=JSON2.parse(msg);     alert(json.id);    }   });     }); });</script>

  这里进入了Jquery的核心文件和一个JSON2.js文件

  url:"http://localhost:10168/WebService1.asmx/HelloWorld"  这个是调用WebService方法的路径,HelloWorld 是WebService 中的方法。

  同时还要设置WebService请求后返回的参数格式(json),data是用于解释返回的值。这里值得注意的是data是一个json格式的字符串,而且对象名为d,所以我们用到了后面的var msg=data.d;

  如果我们要能够像JSON那个以  . 操作来访问键值,我们就使用到了 JSON2.js 中的方法将 json字符串转化为json对象,这样就可以以. 操作来访问对象了。

  如果我们需要调用带参数的WebService ,则我们可以再data 中指定传递的参数,参数名要和WebService中方法参数名相同。

  在这里应该说是没有问题,我在写这个例子的时候,并不是这么顺利,后来查了很多关于WebService的资料,原来我们要修改WebService中Web.config 的配置,否则我们不能以Url 那种格式访问WebService。

  配置如下:

  在System.web 这个节点中添加如下配置即可

<webServices> <protocols> <add name="HttpGet"/> <add name="HttpPost"/> </protocols></webServices>

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表