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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
关于在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
真正的ZIP文件操作类(php)
2007/07/21 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
微信小程序开发的基本流程步骤
2019/01/31 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
python分割文件的常用方法
2014/11/01 Python
Python批量查询域名是否被注册过
2017/06/21 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
区分python中的进程与线程
2020/08/13 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
工作决心书
2014/03/11 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android