jquery调用wcf并展示出数据的方法_Javascript教程-查字典教程网

首选创能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">

</head>

<body>

<div>

</div>

<div>

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>

</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>

4 <configSections>

5 <>

6 <sectionGroup name="ajaxNet">

7 <section name="ajaxSettings" type="AjaxPro.AjaxSettingsSectionHandler,AjaxPro.2" requirePermission="false" restartOnExternalChanges="true"/>

8 </sectionGroup>

9 <>

</sectionGroup>

</configSections>

</connectionStrings>

</ajaxSettings>

</ajaxNet>

<system.web>

</httpHandlers>

</system.web>

</location>

<system.web>

</assemblies>

</buildProviders>

</compilation>

<pages>

</controls>

</pages>

</httpHandlers>

</httpModules>

</system.web>

<system.codedom>

<compiler language="c#;cs;csharp" extension=".cs" warningLevel="4"

type="Microsoft.CSharp.CSharpCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">

</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">

</compiler>

</compilers>

</system.codedom>

<system.webServer>

</modules>

<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"/>

</handlers>

</system.webServer>

</dependentAssembly>

</dependentAssembly>

</dependentAssembly>

</assemblyBinding>

</runtime>

<system.serviceModel>

</behavior>

</endpointBehaviors>

</behaviors>

</baseAddressPrefixFilters>

</serviceHostingEnvironment>

<endpoint address="" behaviorConfiguration="imgServiceAspNetAjaxBehavior"

binding="webHttpBinding" contract="imgService" />

</service>

</services>

</system.serviceModel>

</configuration>

好的，成功！上传到gd空间试试 :)