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);
}
});
调用效果如图:
二、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" };
}
这样可以断点参数列表,得到客户端发送过来的参数,截图如:
结合上述代码,我们基本上完成了jquery对Restful 风格的WCF 服务的消费任务,那么在EXTJs中或者其他前端开发库中使用方式将会是大同小异的。
本篇代码下载:点击下载
使用多种客户端消费WCF RestFul服务(四)——Jquery篇的更多相关文章
-
使用多种客户端消费WCF RestFul服务(一)——服务端
RestFul风格的WCF既然作为跨平台.跨语言.跨技术的一种方式出现,并且在ASP.NET API流行起来之前还是架构的首选技术之一,那么我们就来简要的介绍一下WCF在各个平台客户端的操作. 开发工 ...
-
使用多种客户端消费WCF RestFul服务(三)——.net4.5篇
.net 4.5篇 在.net 4.5下面微软提供了System.Net.Http.dll可以非常方便的使用HTTP请求(其实是用来支持Asp.Net Web Api的,不过我们可以拿过来用) 服务仍 ...
-
使用多种客户端消费WCF RestFul服务(二)——.net4.0篇
.net 4.0篇 在.net 4.0下面微软并没有提供类似Net.Http的Rest访问组件,而是在codeplex上面提供的WCF REST Starter Kit Preview 2 里面可以找 ...
-
Springboot &; Mybatis 构建restful 服务四
Springboot & Mybatis 构建restful 服务四 1 前置条件 成功执行完Springboot & Mybatis 构建restful 服务三 2 restful ...
-
WCF Restful 服务 Get/Post请求
Restful Get方式请求: Restful服务 Get请求方式:http://localhost:10718/Service1.svc/Get/A/B/C http://localhost:1 ...
-
WCF Restful Post调用
一.首先建立Http的服务端,此示例的寄宿体为WindowsService,以下代码仅为WCF Restful服务代码,不包括服务启动和安装代码 1.服务契约 /// <summary> ...
-
Springboot &; Mybatis 构建restful 服务五
Springboot & Mybatis 构建restful 服务五 1 前置条件 成功执行完Springboot & Mybatis 构建restful 服务四 2 restful ...
-
WCF Restful Service
对 Web Services.WCF 和 Restful 的扫盲可参见:https://www.cnblogs.com/scy251147/p/3382436.html 关于之前对 WCF 的学习,可 ...
-
构建基于WCF Restful Service的服务
前言 传统的Asmx服务,由于遵循SOAP协议,所以返回内容以xml方式组织.并且客户端需要添加服务端引用才能使用(虽然看到网络上已经提供了这方面的Dynamic Proxy,但是没有这种方式简便), ...
随机推荐
-
vmware workstation LINUX磁盘扩容
1.edit virtual machine settings -> 选中硬盘->右侧utilities->expand(虚拟机不能存在镜像),输入要扩容到的大小 2.扩容之后进入系 ...
-
sql:MySQL 6.7 表,视图,存储过程结构查询
#数据库MySQL 6.7 use sakila; #查询表名 show tables; # SELECT TABLE_NAME,TABLE_ROWS FROM INFORMATION_SCHEMA. ...
-
选择第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] ...
-
1016. 部分A+B
/* * Main.c * 1016. 部分A+B * Created on: 2014年8月30日 * Author: Boomkeeper *******测试通过********* */ #inc ...
-
最大稳定极值区域(MSER)检测
http://blog.csdn.net/zizi7/article/details/50379973 http://www.cnblogs.com/dawnminghuang/p/3779552.h ...
-
select into from 和 insert into select 的用法和区别(转)
转自:http://www.studyofnet.com/news/182.html select into from 和 insert into select都是用来复制表,两者的主要区别为: se ...
-
性能超前,详解腾讯云新一代Redis缓存数据库
背景 当前内存数据库发展迅速,用户对于存储系统的要求也越来越高,为了满足各类业务场景的需要,腾讯云设计了新一代的内存数据库,不但保留了原来系统的高性能,高可用等特性,同时还兼容了当前流行的Redis原 ...
-
[php] 添加接口访问日志(文件)
日志参数: 请求参数,请求地址,响应结果 步骤: 1. 定义日志目录,没有的需要创建 2. 定义日志名称 3. 以追加的形式写入日志文件 FILE_APPEND public function ad ...
-
逆向暴力求解 538.D Weird Chess
11.12.2018 逆向暴力求解 538.D Weird Chess New Point: 没有读好题 越界的情况无法判断,所以输出任何一种就可以 所以他给你的样例输出完全是误导 输出还搞错了~ 输 ...
-
用greenlet实现协程消费者生产者
代码: from greenlet import greenlet import random def pro(): 生产者 while True: item = random.randint(0,9 ...