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+數據庫模式的。

1、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>
     
      <!-- 一、配置服務對應的行爲-->
      <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>

      <!-- 二、添加終截節點對應的行爲-->
      <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>

2、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服務已經鏈接到數據庫並能正確調用出數據庫中對應的記錄了。
 

3、用於發佈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」。正常的話，會顯

示「已建立服務。」等信息。

4、新建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