使用多种客户端消费WCF RestFul服务(四)——Jquery篇

时间:2022-12-30 22:31:22

Jquery篇

互联网开发中少不了各类前端开发框架,其中JQUERY就是最流行之一,本篇我们就采用JQUERY来消费WCF RestFul服务,其中用到JSON基础知识,如果有想了解的朋友,请访问:使用Jquery解析Json基础知识

开发工具:Microsoft Visual Studio 2013(仅仅只是为了F5)

版本:jQuery JavaScript Library v1.4.2

另用到jquery-json 扩展库

下载地址在这里:http://code.google.com/p/jquery-json/

服务端仍然用第一篇的,不过有一些改动,本篇将另行提供下载。

一、GET方式

新建Index_Get.html静态页,添加JS引用:

<script type="text/javascript" src="JS/jquery-1.4.2.js"></script>

然后调用Jquery初始化方法:

$(document).ready(function () {
$.ajax({
type: "get",
url: "http://localhost:3720/UserService.svc/GetPerson",
contentType: "application/json; charset=utf-8",
success: function (json)
{
alert(json.Name)
},
error: function (error) {
alert("调用出错" + error.responseText);
}
});

解释:

type:表示提交请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 Delete 也可以使用,但仅部分浏览器支持;

    url:请求服务资源名;

    contentType:提交编码格式(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合;

    success:请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态。

带参方式基本一样,只是资源名后面加了GET参数。

$.ajax({
type: "get",
url: "http://localhost:3720/UserService.svc/GetPersonById/2",
contentType: "application/json; charset=utf-8",
success: function (json) {
alert(json.Name)
},
error: function (error) {
alert("调用出错" + error.responseText);
}
});

调用效果如图:

使用多种客户端消费WCF RestFul服务(四)——Jquery篇

二、POST方式

新建Index_Post.html静态页,添加JS引用:

<script type="text/javascript" src="JS/jquery-1.4.2.js"></script>
<script type="text/javascript" src="JS/json2.js"></script>

然后调用Jquery初始化方法:

$.ajax({
type: "POST",
url: "http://localhost:3720/UserService.svc/GetPersonPost",
contentType: "application/json",
data: "",
dataType: "text",
processData: false,
success: function (json) { alert(json) },
error: function (error) {
alert("调用出错" + error.responseText);
}
});

解释:

type:表示提交请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 Delete 也可以使用,但仅部分浏览器支持;

    url:请求服务资源名;

    data:表示要POST发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将
      自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2';

    dataType:预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

             "xml": 返回 XML 文档,可用 jQuery 处理。

               "html": 返回纯文本 HTML 信息;包含 script 元素。

               "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

               "json": 返回 JSON 数据 。

               "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

contentType:提交编码格式(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合;

processData:(默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

success:请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态。

如果要POST参数回去,需要(建议)将参数构造成JSON格式,如:

{"id":"2","name":"deluyi","age":"33"}

然后在 Data中赋值,具体实现方式如下:

$.ajax({
type: "POST",
url: "http://localhost:3720/UserService.svc/GetPersonPostById",
contentType: "application/json",
data: '{"id":"2","name":"deluyi","age":"33"}',
dataType: "JSON",
processData: true,
success: function (json)
{
alert(json);
},
error: function (error) {
alert("调用出错" + error.responseText);
}
});

这种POST的数据到了服务端不会被自动解析为User类型(或者说我还没找到能够让他解析为User类型的方法),那么我们稍微修改下服务端的参数定义方式,如:

[OperationContract]
[WebInvoke(UriTemplate = "GetPersonPostById", RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat =
     WebMessageFormat.Json, Method = "POST")]
public User GetUserPostById(string id, string name, string age)
{
return new User { Age = "", ID = "", Name = "laoliu" };
}

这样可以断点参数列表,得到客户端发送过来的参数,截图如:

使用多种客户端消费WCF RestFul服务(四)——Jquery篇

结合上述代码,我们基本上完成了jquery对Restful 风格的WCF 服务的消费任务,那么在EXTJs中或者其他前端开发库中使用方式将会是大同小异的。

本篇代码下载:点击下载

使用多种客户端消费WCF RestFul服务(四)——Jquery篇的更多相关文章

  1. 使用多种客户端消费WCF RestFul服务&lpar;一&rpar;——服务端

    RestFul风格的WCF既然作为跨平台.跨语言.跨技术的一种方式出现,并且在ASP.NET API流行起来之前还是架构的首选技术之一,那么我们就来简要的介绍一下WCF在各个平台客户端的操作. 开发工 ...

  2. 使用多种客户端消费WCF RestFul服务&lpar;三&rpar;——&period;net4&period;5篇

    .net 4.5篇 在.net 4.5下面微软提供了System.Net.Http.dll可以非常方便的使用HTTP请求(其实是用来支持Asp.Net Web Api的,不过我们可以拿过来用) 服务仍 ...

  3. 使用多种客户端消费WCF RestFul服务&lpar;二&rpar;——&period;net4&period;0篇

    .net 4.0篇 在.net 4.0下面微软并没有提供类似Net.Http的Rest访问组件,而是在codeplex上面提供的WCF REST Starter Kit Preview 2 里面可以找 ...

  4. Springboot &amp&semi; Mybatis 构建restful 服务四

    Springboot & Mybatis 构建restful 服务四 1 前置条件 成功执行完Springboot & Mybatis 构建restful 服务三 2 restful ...

  5. WCF Restful 服务 Get&sol;Post请求

    Restful  Get方式请求: Restful服务 Get请求方式:http://localhost:10718/Service1.svc/Get/A/B/C http://localhost:1 ...

  6. WCF Restful Post调用

    一.首先建立Http的服务端,此示例的寄宿体为WindowsService,以下代码仅为WCF Restful服务代码,不包括服务启动和安装代码 1.服务契约 /// <summary> ...

  7. Springboot &amp&semi; Mybatis 构建restful 服务五

    Springboot & Mybatis 构建restful 服务五 1 前置条件 成功执行完Springboot & Mybatis 构建restful 服务四 2 restful ...

  8. WCF Restful Service

    对 Web Services.WCF 和 Restful 的扫盲可参见:https://www.cnblogs.com/scy251147/p/3382436.html 关于之前对 WCF 的学习,可 ...

  9. 构建基于WCF Restful Service的服务

    前言 传统的Asmx服务,由于遵循SOAP协议,所以返回内容以xml方式组织.并且客户端需要添加服务端引用才能使用(虽然看到网络上已经提供了这方面的Dynamic Proxy,但是没有这种方式简便), ...

随机推荐

  1. vmware workstation LINUX磁盘扩容

    1.edit virtual machine settings -> 选中硬盘->右侧utilities->expand(虚拟机不能存在镜像),输入要扩容到的大小 2.扩容之后进入系 ...

  2. sql&colon;MySQL 6&period;7 表&comma;视图&comma;存储过程结构查询

    #数据库MySQL 6.7 use sakila; #查询表名 show tables; # SELECT TABLE_NAME,TABLE_ROWS FROM INFORMATION_SCHEMA. ...

  3. 选择第n小的元素之python实现源码

    def partition(A, p, r): j = p+1 for i in range(p+1, r+1): if(A[i] < A[p]): tmp = A[i] A[i] = A[j] ...

  4. 1016&period; 部分A&plus;B

    /* * Main.c * 1016. 部分A+B * Created on: 2014年8月30日 * Author: Boomkeeper *******测试通过********* */ #inc ...

  5. 最大稳定极值区域(MSER)检测

    http://blog.csdn.net/zizi7/article/details/50379973 http://www.cnblogs.com/dawnminghuang/p/3779552.h ...

  6. select into from 和 insert into select 的用法和区别&lpar;转&rpar;

    转自:http://www.studyofnet.com/news/182.html select into from 和 insert into select都是用来复制表,两者的主要区别为: se ...

  7. 性能超前,详解腾讯云新一代Redis缓存数据库

    背景 当前内存数据库发展迅速,用户对于存储系统的要求也越来越高,为了满足各类业务场景的需要,腾讯云设计了新一代的内存数据库,不但保留了原来系统的高性能,高可用等特性,同时还兼容了当前流行的Redis原 ...

  8. &lbrack;php&rsqb; 添加接口访问日志&lpar;文件&rpar;

    日志参数: 请求参数,请求地址,响应结果 步骤: 1. 定义日志目录,没有的需要创建 2. 定义日志名称 3. 以追加的形式写入日志文件  FILE_APPEND public function ad ...

  9. 逆向暴力求解 538&period;D Weird Chess

    11.12.2018 逆向暴力求解 538.D Weird Chess New Point: 没有读好题 越界的情况无法判断,所以输出任何一种就可以 所以他给你的样例输出完全是误导 输出还搞错了~ 输 ...

  10. 用greenlet实现协程消费者生产者

    代码: from greenlet import greenlet import random def pro(): 生产者 while True: item = random.randint(0,9 ...