jQuery调用RESTful WCF示例(GET方法/POST方法)
时间:2022-04-23
本文章向大家介绍jQuery调用RESTful WCF示例(GET方法/POST方法),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
不废话了,直奔主题吧
wcf端:
近几年比较流行restful,为了能让ajax调用,同时也为了支持restful风格的uri,在创建一个Ajax-enabled Wcf Service后,必须手动修改svc文件,指定Factory,即:
<%@ ServiceHost Language="C#" Debug="true" Service="ajaxSample.HelloWorld"
CodeBehind="HelloWorld.svc.cs" Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>
注:如果不添加Factory,则wcf将无法用类似http://localhost/helloWorld.svc/Hello/person/name 的restful方式直接访问。
同时还要去掉web.config中的<enableWebScript />即类似:
<system.serviceModel>
<behaviors>
<endpointBehaviors>
<behavior name="ajaxSample.HelloWorldAspNetAjaxBehavior">
<!--<enableWebScript />-->
</behavior>
</endpointBehaviors>
</behaviors>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true"
multipleSiteBindingsEnabled="true" />
<services>
<service name="ajaxSample.HelloWorld">
<endpoint address="" behaviorConfiguration="ajaxSample.HelloWorldAspNetAjaxBehavior"
binding="webHttpBinding" contract="ajaxSample.HelloWorld" />
</service>
</services>
</system.serviceModel>
好了,开始写代码,鉴于wcf调用时有GET/POST二种方式,下面把几种常用的情况都写一个示例方法:
using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
namespace ajaxSample
{
[ServiceContract(Namespace = "http://yjmyzz.cnblogs.com/")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class HelloWorld
{
/// <summary>
/// 只能Post的Restful方法
/// </summary>
/// <param name="person"></param>
/// <param name="welcome"></param>
/// <returns></returns>
[OperationContract]
[WebInvoke(Method = "POST", UriTemplate = "PostRestfulTest/{person}/{welcome}", ResponseFormat = WebMessageFormat.Json)]
public List<string> PostRestfulTest(string person,string welcome)
{
List<string> result = new List<string>();
result.Add("PostRestfulTest -> from server:");
result.Add(person);
result.Add(welcome);
return result;
}
/// <summary>
/// 只能Get的Restful方法
/// </summary>
/// <param name="person"></param>
/// <param name="welcome"></param>
/// <returns></returns>
[OperationContract]
[WebInvoke(Method = "GET", UriTemplate = "GETRestfulTest/{person}/{welcome}", ResponseFormat = WebMessageFormat.Json)]
public List<string> GETRestfulTest(string person, string welcome)
{
List<string> result = new List<string>();
result.Add("GETRestfulTest -> from server:");
result.Add(person);
result.Add(welcome);
return result;
}
/// <summary>
/// 即可Get与Post的Restful方法
/// </summary>
/// <param name="person"></param>
/// <param name="welcome"></param>
/// <returns></returns>
[OperationContract]
[WebInvoke(Method = "*", UriTemplate = "RestfulTest/{person}/{welcome}", ResponseFormat = WebMessageFormat.Json)]
public List<string> RestfulTest(string person, string welcome)
{
List<string> result = new List<string>();
result.Add("RestfulTest -> from server:");
result.Add(person);
result.Add(welcome);
return result;
}
/// <summary>
/// 只能Post的常规方法(注:Post方式,BodyStyle必须设置成WrappedRequest或Wrapped)
/// </summary>
/// <param name="person"></param>
/// <param name="welcome"></param>
/// <returns></returns>
[OperationContract]
[WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json, BodyStyle=WebMessageBodyStyle.WrappedRequest)]
public List<string> PostTest(string person, string welcome)
{
List<string> result = new List<string>();
result.Add("PostRestfulTest -> from server:");
result.Add(person);
result.Add(welcome);
return result;
}
/// <summary>
/// 只能Get的常规方法
/// </summary>
/// <param name="person"></param>
/// <param name="welcome"></param>
/// <returns></returns>
[OperationContract]
[WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json)]
public List<string> GETTest(string person, string welcome)
{
List<string> result = new List<string>();
result.Add("GETTest -> from server:");
result.Add(person);
result.Add(welcome);
return result;
}
}
}
jQuery调用代码:
<script type="text/javascript">
$().ready(function () {
$.post("HelloWorld.svc/PostRestfulTest/111/222", function (data) {
alert("PostRestfulTest调用成功,返回值为:" + data);
})
$.get("HelloWorld.svc/GETRestfulTest/333/444", function (data) {
alert("GETRestfulTest调用成功,返回值为:" + data);
})
$.get("HelloWorld.svc/RestfulTest/555/666", function (data) {
alert("RestfulTest GET方式调用成功,返回值为:" + data);
})
$.post("HelloWorld.svc/RestfulTest/777/888", function (data) {
alert("RestfulTest POST方式调用成功,返回值为:" + data);
})
$.get("HelloWorld.svc/GETTest", { person: "aaa", welcome: "bbb" }, function (data) {
alert("GETTest 调用成功,返回值为:" + data);
});
$.ajax({
url: "HelloWorld.svc/PostTest",
type: "POST",
contentType: "application/json",
data: '{"person":"ccc","welcome":"ddd"}',
dataType: "html",
success: function (data) { alert("PostTest调用成功,返回值为:" + data); }
});
})
</script>
有时候,WCF暴露的方法中可能需要一些敏感信息做为参数(比如用户名/用户ID之类),这时如果直接用js来调用wcf,可能会把这部分信息泄漏在客户端,这种场景下,我们也经常用一个服务端的ashx来做中转
TestService.svc
using System.ServiceModel;
namespace ashx_jQuery
{
[ServiceContract]
public class TestService
{
/// <summary>
/// 获取当前用户指定月份的工资
/// </summary>
/// <param name="userId"></param>
/// <param name="month"></param>
/// <returns></returns>
[OperationContract]
public double GetSalary(int userId,int month)
{
if (month == 1)//只是演示而已
{
return 5000;
}
else
{
return 1000;
}
}
}
}
AjaxProcess.ashx
using System.Web;
namespace ashx_jQuery
{
/// <summary>
/// Summary description for AjaxProcess
/// </summary>
public class AjaxProcess : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string month = context.Request["month"];
TestService wcf = new TestService();
double salary = wcf.GetSalary(GetUserId(), int.Parse(month));
context.Response.Write("{salary:" + salary + "}");
}
/// <summary>
/// 获取当前的用户ID
/// </summary>
/// <returns></returns>
private int GetUserId()
{
return 1;
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
jQuery调用:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="ashx_jQuery._default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery ashx Sample</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$().ready(function () {
$("#btnTest").click(function () {
$.post(
"AjaxProcess.ashx",
{ month:1 },
function (e) {
var d = eval("(" + e + ")");
alert(d.salary);
}, "html");
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="GetSalary" id="btnTest"/>
</form>
</body>
</html>
示例代码:
http://files.cnblogs.com/yjmyzz/jquery_ajax_wcf_rest.zip
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 手把手教你,嘴对嘴传达----Apache的访问控制
- spring框架应用系列二:component-scan自动扫描注册装配
- 手把手教你,嘴对嘴传达------Apache日志管理日志(rotatelogs分割工具、AWStats日志分析)
- 配合JAVA的AJAX使用
- 手把手教你,嘴对嘴传达------Apache网页优化
- jQuery通过Ajax实现请求后台接口数据
- Git常规操作
- 手把手教你,嘴对嘴传达 ----源码编译安装部署LAMP平台(LAMP平台与编译安装详解,Apache,MySQL与PHP源码编译安装,LAMP平台搭建论坛)
- Vue点击切换样式
- ElementUI引入到vue项目开发
- 手把手教你,嘴对嘴传达------Apache(安全优化防盗链、隐藏版本信息)
- spring框架应用系列三:切面编程(带参数)
- 排障集锦:九九八十一难之第六难!(98)Address already in use: AH00072: make_sock: could not bind to address ::80
- Vue页面中引用自定义组件
- Vue如何引用Vant组件