JQuery 调用WebService

简介:   以前都是Web程序调用WebService,.net把WebService封装的太简单了,所以之前都是很肤浅的用,都没有想过更深层的东西,并且只是停留在表面的添加引用和调用。     1.首先建一个WebService程序 代码 ///     /// WebService1 的...

  以前都是Web程序调用WebService,.net把WebService封装的太简单了,所以之前都是很肤浅的用,都没有想过更深层的东西,并且只是停留在表面的添加引用和调用。

 

  1.首先建一个WebService程序

img_405b18b4b6584ae338e0f6ecaf736533.gif 代码
///   <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

  1  /* *
  2   * 
  3   * 2009-5-26
  4   * 贺     臣
  5   * 
  6   * 将某个对象转化为Json数据格式
  7   *  */
  8  using  System;
  9  using  System.Collections.Generic;
 10  using  System.Linq;
 11  using  System.Text;
 12  using  System.IO;
 13  using  System.Data;
 14  using  System.ServiceModel.Web;
 15  using  System.Runtime.Serialization;
 16  using  System.Runtime.Serialization.Json;
 17 
 18  namespace  CommonData.Json
 19  {
 20       public   class  ObjectSerialization
 21      {
 22           private   object  _entity;
 23 
 24           ///   <summary>
 25           ///  被序列化得实体对象
 26           ///   </summary>
 27           public   object  Entity
 28          {
 29               get  {  return  _entity; }
 30               set  { _entity  =  value; }
 31          }
 32 
 33           private   string  _jsonData;
 34 
 35           ///   <summary>
 36           ///  被转化为json格式数据的对象
 37           ///   </summary>
 38           public   string  JsonData
 39          {
 40               get  {  return  _jsonData; }
 41               set  { _jsonData  =  value; }
 42          }
 43 
 44           ///   <summary>
 45           ///  无参数构造方法
 46           ///   </summary>
 47           public  ObjectSerialization()
 48          { 
 49          }
 50 
 51           ///   <summary>
 52           ///  有参数构造方法
 53           ///   </summary>
 54           ///   <param name="entity"> 要被序列化得实体对象 </param>
 55           public  ObjectSerialization( object  entity)
 56          {
 57               this ._entity  =  entity;
 58          }
 59 
 60 
 61           ///   <summary>
 62           ///  序列化实体对象
 63           ///   </summary>
 64           ///   <returns></returns>
 65           public   string  EntityToJson()
 66          {
 67              var serializer  =   new  DataContractJsonSerializer(Entity.GetType());
 68              MemoryStream ms  =   new  MemoryStream();
 69              serializer.WriteObject(ms, Entity);
 70               byte [] myByte  =   new   byte [ms.Length];
 71              ms.Position  =   0 ;
 72              ms.Read(myByte,  0 , ( int )ms.Length);
 73               string  dataString  =  Encoding.UTF8.GetString(myByte);
 74               return  dataString;
 75          }
 76 
 77 
 78           ///   <summary>
 79           ///  序列化实体对象
 80           ///   </summary>
 81           ///   <param name="entity"> 要被序列化得实体对象 </param>
 82           ///   <returns></returns>
 83           public   string  EntityToJson( object  entity)
 84          {
 85               this ._entity  =  entity;
 86               return  EntityToJson();
 87          }
 88 
 89           ///   <summary>
 90           ///  将Json格式数据转换为对象
 91           ///   </summary>
 92           ///   <returns></returns>
 93           public  T GetObjectJson < T > ()
 94          {
 95              MemoryStream ms  =   new  MemoryStream(Encoding.UTF8.GetBytes(JsonData));
 96              var serializer  =   new  DataContractJsonSerializer( typeof (T));
 97              T t  =  (T)serializer.ReadObject(ms);
 98               return  t;
 99          }
100 
101           ///   <summary>
102           ///  将Json格式数据转换为对象
103           ///   </summary>
104           ///   <param name="jsonData"> json数据格式 </param>
105           ///   <returns></returns>
106           public  T GetObjectJson < T > ( string  jsonData)
107          {
108               this ._jsonData  =  jsonData;
109               return  GetObjectJson < T > ();
110          }
111      }
112  }
113 

 

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

 

  3.前台程序Jquery调用

 1  < script src = " jquery-1[1].2.3.min.js "  type = " text/javascript " >< / script>
 2 
 3       < script src = " json2.js "  type = " text/javascript " >< / script>
 4       < script type = " text/javascript " >
 5          $(document).ready( function () {
 6          $( " #btnClick " ).click( function () {
 7                  $.ajax({
 8                      url: " http://localhost:10168/WebService1.asmx/HelloWorld " ,
 9                      beforeSend:  function (x) { 
10                        x.setRequestHeader( " Content-Type " ,  " application/json; charset=utf-8 " ); 
11                      },
12                      data:{},
13                      dataType: " json " ,
14                      type: " POST " ,
15                      error:  function (x, e) { 
16                    alert(x.responseText); 
17                  }, 
18              complete:  function (x) { 
19                         // alert(x.responseText); 
20                       } ,
21                      success: function (data){
22                          var  msg = data.d;
23                          var  json = JSON2.parse(msg);
24                         alert(json.id);
25                      }
26                  });
27                  
28              });
29          });
30       < / 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>

相关文章
|
JSON JavaScript 前端开发
|
前端开发 JavaScript .NET
Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
转自:http://www.cnblogs.com/aierong/archive/2012/10/13/jqueryDataSetDataTablewebServicejsonajaxxml.html
811 0
|
前端开发 JavaScript .NET
Jquery ajax 调用 asp.net webservice 一般步骤
一般调用Web服务的步骤: 1.Web服务一定要添加[ScriptService]   1)添加引用:System.Web.Extensions;  2)using System.Web.Script.
788 0
|
JSON JavaScript 前端开发
[入门篇]Jquery读取.Net WebService Json数据
鉴于上篇文章中提到的Json优点:易读性、可扩展性和操作方便,接下来我们实现一个简单的例子Demo,场景是:查询商品信息;实现过程:Web程序通过Jquery调用WebService,Web Service返回Json对象,成功调用后,对返回的JSon结果进行处理,下面我们看一下具体实现过程: 1、 首先创建一个Aap.
896 0
|
JSON 前端开发 JavaScript
asp.net :使用jquery 的ajax +WebService+json 实现无刷新去后台值
首先贴上Jquery的ajax:   代码 $.ajax({ url: 'ws_Ajax.asmx/BindDictByUpper', type: 'POST', contentType...
1026 0
|
XML JSON 前端开发
Jquery Ajax WebService
仅供参考 ws.aspx 代码                $.ajax({                    type: "POST",   //访问WebService使用Post方式请求                    contentType: "application/js...
832 0