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系列(6) 强大的原型和原型链
Jan 15 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
用JS实现飞机大战小游戏
Jun 09 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
php读取和保存base64编码的图片内容
2017/04/22 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
javascript 禁止复制网页
2009/06/11 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
cookie的secure属性详解
2015/04/08 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
浅述python2与python3的简单区别
2018/09/19 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
关于工资低的辞职信
2014/01/14 职场文书
优秀员工表扬信
2014/01/17 职场文书
关于赌博的检讨书
2014/01/24 职场文书
大学信息公开实施方案
2014/03/09 职场文书
会议接待欢迎标语
2014/10/08 职场文书
个人作风建设自查报告
2014/10/22 职场文书
班主任高考寄语
2015/02/26 职场文书
工作能力自我评价2015
2015/03/05 职场文书
行政经理岗位职责
2015/04/15 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
Java并发编程必备之Future机制
2021/06/30 Java/Android