jquery调用wcf并展示出数据的方法


Posted in Javascript onJuly 07, 2011

首选创能wcf,代码很简单,如下:

using System; 
using System.Data; 
using System.ServiceModel; 
using System.ServiceModel.Activation; 
using System.ServiceModel.Web; 
using System.Web.Script.Services; [ServiceContract(Namespace = "")] 
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 
[ServiceBehavior(IncludeExceptionDetailInFaults = true)] 
public class imgService 
{ 
// 要使用 HTTP GET,请添加 [WebGet] 特性。(默认 ResponseFormat 为 WebMessageFormat.Json) 
// 要创建返回 XML 的操作, 
// 请添加 [WebGet(ResponseFormat=WebMessageFormat.Xml)], 
// 并在操作正文中包括以下行: 
// WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml"; 
[OperationContract] 
[WebGet(RequestFormat=WebMessageFormat.Json,ResponseFormat=WebMessageFormat.Json)] 
//[WebInvoke(Method = "GET", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json,BodyStyle = WebMessageBodyStyle.WrappedRequest)] 
public DataTable GetDataTable(string pz) 
{ 
// 在此处添加操作实现 
DataSet ds = WebBase.GetDS(WebBase.meinvRepository, string.Empty, " body_id desc",pz); 
if (ds.Tables.Count > 0) 
return ds.Tables[0]; 
return null; 
} 
// 在此处添加更多操作并使用 [OperationContract] 标记它们 
}

说明一下,wcf就一个GetDataTable方法,有一个参数pz表示返回数据的行数,返回的table以json数据给jquery使用

页面调用方法也很简单:

<%@ Page Language="C#" EnableViewState="false" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
Inherits="jquerywcf_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 id="Head1" runat="server"> 
<title></title> 
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div class="main"> 
<ul><li><a></a></li></ul> 
</div> 
<div> 
<script type="text/javascript"> 
function sendAJAX(data) { 
var url = "<%=_url %>imgService.svc/GetDataTable"; $.getJSON(url, { pz: "6" }, function (msg) { 
$(msg.d).find("Table").each(function (i) { 
var rq = $(this).children("Body_AddTime").text().split('T')[0].replace("-", "").replace("-", ""); 
rq = rq.substring(0, rq.length - 2); 
var html = '<li><a href="http://meinv.vs2010.com/topic/' + $(this).children("Body_MuLuID").text() + '/' + rq + '/show-id' + $(this).children("Body_ID").text() + '.html" target="_blank"><img src="http://meinv.vs2010.com/' + $(this).children("Body_Tu").text() + '" />' + $(this).children("Body_Name").text() + '</a></li>'; 
$(".main ul").append(html); 
}); 
}); 
} 

$(function () { 
sendAJAX(); 
}); 
</script> 
<div id="msg"> 
</div> 
</div> 
</form> 
</body> 
</html>

说明一下,主要是通过jquery的getjson方法去取得wcf返回的数据,传参方法:

$.getJSON(url, { pz: "6" }, function (msg) {alert(msg.d)});这里是返回6条数据还有wcf的svc上加上属性:
Factory=System.ServiceModel.Activation.WebScriptServiceHostFactory还有web.config的配置:

<?xml version="1.0"?> 
2 <configuration> 
3 
4 <configSections> 
5 <!--ajax--> 
6 <sectionGroup name="ajaxNet"> 
7 <section name="ajaxSettings" type="AjaxPro.AjaxSettingsSectionHandler,AjaxPro.2" requirePermission="false" restartOnExternalChanges="true"/> 
8 </sectionGroup> 
9 <!--ajax--> 
<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> 
<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> 
<section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/> 
<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> 
<section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="Everywhere" /> 
<section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" /> 
<section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" /> 
<section name="roleService" type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" /> 
</sectionGroup> 
</sectionGroup> 
</sectionGroup> 
</configSections> 
<appSettings/> 
<connectionStrings> 
<add name="meinvvs2010ConnectionString" connectionString="server=127.0.0.1;user id=test; password=test; database=test;pooling=false" providerName="MySql.Data.MySqlClient"/> 
</connectionStrings> 
<!--ajax--> 
<ajaxNet> 
<ajaxSettings> 
<urlNamespaceMappings useAssemblyQualifiedName="false" allowListOnly="false"/> 
<jsonConverters includeTypeProperty="true"/> 
<debug enabled="false"/> 
<token enabled="false" sitePassword="password"/> 
</ajaxSettings> 
</ajaxNet> 
<location path="ajaxpro" allowOverride="true" inheritInChildApplications="false"> 
<system.web> 
<globalization requestEncoding="utf-8" responseEncoding="utf-8" fileEncoding="utf-8"/> 
<!--for iis7 
<system.webServer> 
<handlers> 
<add verb="*" path="*.ashx" name="AjaxPro" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/> 
</handlers> 
</system.webServer>--> 
<!--for iis6--> 
<httpHandlers> 
<add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/> 
</httpHandlers> 
</system.web> 
</location> 
<!--ajax--> 
<system.web> 
<customErrors mode="Off"/> 
<compilation debug="true"> 
<assemblies> 
<add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/> 
<add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> 
<add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/> 
<add assembly="System.Xml.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/> <add assembly="System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"/> 
<add assembly="System.ServiceModel.Web, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
</assemblies> 
<buildProviders> 
<remove extension=".svc"/> 
<add extension=".svc" type="System.ServiceModel.Activation.ServiceBuildProvider,System.ServiceModel, Version=3.0.0.0, Culture=neutral,PublicKeyToken=b77a5c561934e089"/> 
</buildProviders> 
</compilation> 

<!-- 
通过 <authentication> 节可以配置 
安全身份验证模式,ASP.NET 
使用该模式来识别来访用户身份。 
--> 
<authentication mode="Windows" /> 
<!-- 
如果在执行请求的过程中出现未处理的错误, 
则通过 <customErrors> 节 
可以配置相应的处理步骤。具体而言, 
开发人员通过该节可配置要显示的 html 错误页, 
以代替错误堆栈跟踪。 
<customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm"> 
<error statusCode="403" redirect="NoAccess.htm" /> 
<error statusCode="404" redirect="FileNotFound.htm" /> 
</customErrors> 
--> 
<pages> 
<controls> 
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> 
<add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> 
</controls> 
</pages> 
<httpHandlers> 
<remove verb="*" path="*.asmx"/> 
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> 
<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> 
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/> 
</httpHandlers> 
<httpModules> 
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> 
<add name="ServiceModel" type="System.ServiceModel.Activation.HttpModule, System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"/> 
</httpModules> 
</system.web> 
<system.codedom> 
<compilers> 
<compiler language="c#;cs;csharp" extension=".cs" warningLevel="4" 
type="Microsoft.CSharp.CSharpCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"> 
<providerOption name="CompilerVersion" value="v3.5"/> 
<providerOption name="WarnAsError" value="false"/> 
</compiler> 
<compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" warningLevel="4" 
type="Microsoft.VisualBasic.VBCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"> 
<providerOption name="CompilerVersion" value="v3.5"/> 
<providerOption name="OptionInfer" value="true"/> 
<providerOption name="WarnAsError" value="false"/> 
</compiler> 
</compilers> 
</system.codedom> 
<!-- 
system.webServer 节是在 Internet Information Services 7.0 下运行 ASP.NET AJAX 
所必需的。对早期版本的 IIS 来说则不需要此节。 
--> 
<system.webServer> 
<validation validateIntegratedModeConfiguration="false"/> 
<urlCompression doStaticCompression="true" doDynamicCompression="true"/> 
<httpErrors errorMode="Detailed" /> 
<asp scriptErrorSentToBrowser="true"/> 

<modules> 
<remove name="ScriptModule" /> 
<add name="ScriptModule" preCondition="managedHandler" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> 
</modules> 
<handlers> 
<remove name="WebServiceHandlerFactory-Integrated"/> 
<remove name="ScriptHandlerFactory" /> 
<remove name="ScriptHandlerFactoryAppServices" /> 
<remove name="ScriptResource" /> 
<remove name="svc" /> 
<add name="svc" path="*.svc" verb="*" type="System.ServiceModel.Activation.HttpHandler, System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" preCondition="integratedMode" /> 
<add verb="*" path="*.ashx" name="AjaxPro" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/> 
<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" 
type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> 
<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" 
type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> 
<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> 
</handlers> 
</system.webServer> 
<runtime> 
<assemblyBinding appliesTo="v2.0.50727" xmlns="urn:schemas-microsoft-com:asm.v1"> 
<dependentAssembly> 
<assemblyIdentity name="MySql.Data" publicKeyToken="C5687FC88969C44D"/> 
<!--<bindingRedirect oldVersion="5.0.7.0" newVersion="6.3.2.0"/>--> 
<bindingRedirect oldVersion="5.0.7.0" newVersion="6.2.3.0"/> 
</dependentAssembly> 
<dependentAssembly> 
<assemblyIdentity name="System.Web.Extensions" publicKeyToken="31bf3856ad364e35"/> 
<bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/> 
</dependentAssembly> 
<dependentAssembly> 
<assemblyIdentity name="System.Web.Extensions.Design" publicKeyToken="31bf3856ad364e35"/> 
<bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/> 
</dependentAssembly> 
</assemblyBinding> 
</runtime> 
<system.serviceModel> 
<behaviors> 
<endpointBehaviors> 
<behavior name="imgServiceAspNetAjaxBehavior"> 
<enableWebScript /> 
</behavior> 
</endpointBehaviors> 
</behaviors> 
<serviceHostingEnvironment aspNetCompatibilityEnabled="true" > 
<baseAddressPrefixFilters> 
<!--<add prefix="http://demo.vs2010.com"/>--> 
</baseAddressPrefixFilters> 
</serviceHostingEnvironment> 
<services> 
<service name="imgService"> 
<endpoint address="" behaviorConfiguration="imgServiceAspNetAjaxBehavior" 
binding="webHttpBinding" contract="imgService" /> 
</service> 
</services> 
</system.serviceModel> 
</configuration>

好的,成功!上传到gd空间试试 :)
Javascript 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
一个选择最快的服务器转向代码
Apr 27 Javascript
javascript Base类 包含基本的方法
Jul 22 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
JS原型链怎么理解
Jun 27 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
简单的网页广告特效实例
Aug 19 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
基于json的jquery地区联动效果代码
Jul 06 #Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 #Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 #Javascript
jquery中获取元素的几种方式小结
Jul 05 #Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 #Javascript
Javascript计算时间差的函数分享
Jul 04 #Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 #Javascript
You might like
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
Python类的专用方法实例分析
2015/01/09 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Python实现扫码工具的示例代码
2020/10/09 Python
外语系毕业生求职自荐信
2014/04/12 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
法院授权委托书范文
2014/08/02 职场文书
银行委托书范本
2014/09/28 职场文书
尼克胡哲观后感
2015/06/08 职场文书
爱国主义影片观后感
2015/06/18 职场文书
处罚决定书范文
2015/06/24 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android