jQuery 调用WebService 实例讲解


Posted in Javascript onJune 28, 2016

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>

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
JavaScript Promise 用法
Jun 14 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
浅谈node的事件机制
Oct 09 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 Javascript
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
关于在Servelet中如何获取当前时间的操作方法
Jun 28 #Javascript
关于JS 预解释的相关理解
Jun 28 #Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 #Javascript
浅谈js中的in-for循环
Jun 28 #Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 #Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 #Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 #Javascript
You might like
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
JS跨域代码片段
2012/08/30 Javascript
js 窗口抖动示例
2013/09/04 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
python编程开发之日期操作实例分析
2015/11/13 Python
python基础知识小结之集合
2015/11/25 Python
python字符串的常用操作方法小结
2016/05/21 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
Django forms组件的使用教程
2018/10/08 Python
python文本数据处理学习笔记详解
2019/06/17 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
如何把python项目部署到linux服务器
2020/08/26 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
大学新学期计划书
2014/04/28 职场文书
2015最新民情日记范文
2015/06/26 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
2015元旦感言
2015/12/09 职场文书
《夸父追日》教学反思
2016/02/20 职场文书