VS2010中使用Jquery调用Wcf服务读取数据库记录

VS2010中使用Jquery调用Wcf服务读取数据库记录

开发环境：Window Servere 2008 +SQL SERVE 2008 R2+ IIS7 +VS2010+Jquery1.3.2

功能实现： html中使用Jquery调用远程Wcf服务

优点总结：网上大部分的代码都是直接在web项目中包含SVC文件，也有的用ASPX页面来调用WCF服务，而不是HTML+Jquery+WCF+数据库模式的。

一、WCF服务调用数据库记录对应工程项目新建和代码
打开VS2010，打开“文件”菜单，点击“新建项目”，在“添加新项目”窗体左侧选择项目类型为“WCF”,点击右侧“WCF服务库”,选择顶部的NET类型为" .NET Framework4" ，下方输入名称

为“Jquery.WcfService”

点击“全部保存”按钮，弹出保存项目对话框，名称为“Jquery.WcfService”位置“C:\”,解决方案名称为“Jquery.Wcf”。

选择解决方案资源管理器中的“Jquery.WcfService”项目中的“Service1.cs”文件，点鼠右键，选择“重命名”，输入“CustomersService.cs”；

选择解决方案资源管理器中的“Jquery.WcfService”项目中的“IService1.cs”文件，按F2键，输入“ICustomersService.cs”；

选择解决方案资源管理器中的“Jquery.WcfService”项目,点鼠标右键，选择“属性”，设置“应用程序”-“目标框架”为“.NET Framework4”，弹出对话框中选择“是”。

选择解决方案资源管理器中的“Jquery.WcfService”项目,点鼠标右键，选择“添加引用”，在弹出的“添加引用”页面，选择“.NET”列表中“ System.ServiceModel.Web”项，点击“确定

”按钮。
ICustomersService.cs代码文件如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ServiceModel;
using System.ServiceModel.Web;

namespace Jquery.WcfService
{
    // 注意: 使用“重构”菜单上的“重命名”命令，可以同时更改代码和配置文件中的接口名“ICustomersService”。
    [ServiceContract]
    public interface ICustomersService
    {
        [OperationContract]
        [WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]
        string GetCustomerByCustomerID(string CustomerID);
    }
}

CustomersService.cs代码文件如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.Data.SqlClient;
using System.ServiceModel.Activation;

namespace Jquery.WcfService
{
    // 注意: 使用“重构”菜单上的“重命名”命令，可以同时更改代码和配置文件中的类名“CustomersService”。
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class CustomersService : ICustomersService
    {
        public string GetCustomerByCustomerID(string CustomerID)
        {
            string strReturn = "";
            SqlConnection myConnection = new SqlConnection(@"Data Source=.\N3;Initial Catalog=northwnd;User ID=sa;pwd=123456;");//这里修改为您的数据库连接字符串
            myConnection.Open();
            SqlCommand myCommand = myConnection.CreateCommand();
            myCommand.CommandText = "select * from Customers where CustomerID='" + CustomerID + "'";
            SqlDataReader myDataReader = myCommand.ExecuteReader();
            while (myDataReader.Read())
            {
                strReturn = string.Format("CustomerID:{0} ; CompanyName:{1} ; ContactName:{2}   ", myDataReader["CustomerID"], myDataReader["CompanyName"],

myDataReader["ContactName"]);
            }
            myDataReader.Close();
            myConnection.Close();
            return strReturn;
        }
    }
}

App.config代码文件如下
<?xml version="1.0"?>
<configuration>

  <system.web>
    <compilation debug="true"/>
  </system.web>
  <!-- 部署服务库项目时，必须将配置文件的内容添加到
  主机的 app.config 文件中。System.Configuration 不支持库的配置文件。-->
  <system.serviceModel>

    <!-- A、服务配置 -->
    <services>

      <service name="Jquery.WcfService.CustomersService" behaviorConfiguration="CustomerServiceBehavior">
        <endpoint address="" binding="webHttpBinding" contract="Jquery.WcfService.ICustomersService" behaviorConfiguration="CustomersEndpointBehavior">
          <identity>
            <dns value="localhost" />
          </identity>
        </endpoint>
        <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
        <host>
          <baseAddresses>
            <add baseAddress="http://192.168.1.249:6089/Jquery.WcfService/CustomersService/" />
          </baseAddresses>
        </host>
      </service>
     
    </services>

    <!-- B、行为配置 -->
    <behaviors>
     
      <!-- 1、配置服务对应的行为-->
      <serviceBehaviors>

        <!-- 1.1发布到远程服务器对应的行为配置 -->
        <behavior name="">
          <!-- 为避免泄漏元数据信息，
          请在部署前将以下值设置为 false 并删除上面的元数据终结点  -->
          <serviceMetadata httpGetEnabled="True"/>
          <!-- 要接收故障异常详细信息以进行调试，
          请将以下值设置为 true。在部署前设置为 false
            以避免泄漏异常信息-->
          <serviceDebug includeExceptionDetailInFaults="False"/>
          <useRequestHeadersForMetadataAddress>
            <defaultPorts>
              <add scheme="http" port="6089" />
              <add scheme="https" port="6089" />
            </defaultPorts>
          </useRequestHeadersForMetadataAddress>
        </behavior>      

        <!--  1.2服务对应的行为配置-->
        <behavior name="CustomerServiceBehavior">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="false" />
        </behavior>

      </serviceBehaviors>

      <!-- 2、添加终截节点对应的行为-->
      <endpointBehaviors>
        <behavior name="CustomersEndpointBehavior">
          <webHttp/>
          <enableWebScript/>
        </behavior>
      </endpointBehaviors>

    </behaviors>

    <!-- C、绑定配置 -->
    <bindings>
      <webHttpBinding>
        <!-- 跨域配置 -->
        <binding name="webBinding" crossDomainScriptAccessEnabled="true"></binding>
      </webHttpBinding>
    </bindings>
   
    <serviceHostingEnvironment  aspNetCompatibilityEnabled="true"/>

    <!-- 大数据传送设置 -->
    <standardEndpoints >
      <webHttpEndpoint >
        <standardEndpoint   name="" maxReceivedMessageSize="3000000" defaultOutgoingResponseFormat="Json" helpEnabled="true"  automaticFormatSelectionEnabled="true">
          <readerQuotas maxArrayLength="300000"/>
        </standardEndpoint>
      </webHttpEndpoint>
    </standardEndpoints>
   
  </system.serviceModel>

<startup><supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.0"/></startup></configuration>

二、WCF服务对应测试项目新建

点击VS2010开发环境中的“文件”菜单，点击“新建项目”，添加新项目，类型为“测试”，名称为“Jquery.WcfTest”;解决方案类型为“添加到解决方案”。

选中Jquery.WcfTest项目的UnitTest1.cs文件, 点鼠标右键--选择“删除”。

选中Jquery.WcfTest项目，点鼠标右键，点“添加”，点“单元测试”，在弹出的“创建单元测试”窗体中，展开“Jquery.WcfService”项目目录树，勾

选“Jquery.WcfService.CustomersService”项，点击“确定”按钮；
双击打开Jquery.WcfTest项目中的“CustomersServiceTest.cs”文件，修改“GetCustomerByCustomerIDTest()”方法中的string CustomerID = string.Empty;为string CustomerID =

"ALFKI";
运行测试：点击VS2010开发环境中的“测试”菜单-点“运行”-“当前上下文中的测试”。

提示信息为如下：
未通过 GetCustomerByCustomerIDTest Jquery.WcfTest Assert.AreEqual 失败。应为: <>，实际为: <CustomerID:ALFKI ; CompanyName:Alfreds Futterkiste ; ContactName:Maria

Anders   >。 
证明WCF服务已经连接到数据库并能正确调用出数据库中对应的记录了。
 

三、用于发布WCF服务的IIS站点新建和WCF服务的发布操作步骤
新建一个站点目录C:\6089
打开IIS,找到网站节点，新建一个站点:网站名称为6089;物理路径为C:\6089;端口为6089;
打开应用程序池节点，选中6089应用程序池，双击打开编辑应用程序池设置，修改托管管道模式为"经典";设置.NET Framework版本为.NET Framework v4.0.30319.

回到VS2010开发环境中，选中Jquery.WcfService项目，点鼠标右键，选中“发布(B)”；打开发布WCF服务窗体，在目标位置输入"http://localhost:6089"，点确定按钮。

回到IIS中，选择名称为“6089”的网站，点右侧下方的“内容视图”，在右侧中间点鼠标右键-“刷新”，会显示出最新的“Jquery.WcfService.CustomersService.svc”等文件，选

择“Jquery.WcfService.CustomersService.svc”文件，点鼠标右键--“浏览”，会在浏览器中打开“http://localhost:6089/Jquery.WcfService.CustomersService.svc”。正常的话，会显

示“已创建服务。”等信息。

四、新建Web站点和HTML页面，测试 Jquery调用WCF服务中的方法
点击VS2010开发环境中的“文件”菜单，点击“新建项目”，选择项目类型为“Web”,点击右侧“ASP.NET 空Web应用程序”，输入名称为“Jquery.Web”，解决方案类型为“添加到解决方案

”。

选中Jquery.Web项目，点鼠标右键，选中“添加”-“新建项”，选择项目类型为“Web”,点击右侧"HTML页"，下方输入名称为“index.htm”，点击“添加”按钮。

选中Jquery.Web项目，点鼠标右键，选中“添加”-“新建文件夹”，重命名文件夹为"js"。

浏览器中打开http://code.google.com/p/jqueryjs/downloads/list网址，下载jquery-1.3.2.js文件到本地，并复制粘贴到Jquery.Web项目中的js文件夹

移动鼠标选中Jquery.Web项目中的"index.htm"页面，点鼠标右键--“设为起始页”。
index.html代码如下：
<!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>
    <title>Jquery调用Wcf服务获取数据库记录</title>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script language="javascript" type="text/javascript">
        function getCustomerInfo() {
            var sendData = '{"CustomerID":"' + document.getElementById('CustomerID').value + '"}';
            alert(sendData);
            $.ajax({
                type: 'post',
                url: 'http://localhost:6089/Jquery.WcfService.CustomersService.svc/GetCustomerByCustomerID',
                contentType: 'text/json',
                data: sendData,
                success: function (msg) {
                    var obj = eval('(' + msg + ')');
                    alert(obj.d);
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    CustomerID：<input type="text" id="CustomerID" value="ALFKI" />
    <br />
    CompanyName：<label id="CompanyName" />
    <br />
    ContactName：<label id="ContactName" />
    <br />
    <input type="button"  value="获取数据库信息" onclick="getCustomerInfo();" />
    </div>
    </form>
</body>
</html>

按F5运行，在浏览器中会打开“http://localhost:1767/index.htm”页面，点击“获取数据库信息”按钮，会提示Jquery的发送信息和来自WCF服务的返回数据库记录信息字符串。

项目代码下载地址：http://download.csdn.net/detail/xqf222/5828217