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

VS2010中使用Jquery调用Wcf服务读取数据库记录的更多相关文章

  1. jQuery调用WCF服务传递JSON对象

    下面这个示例使用了WCF去创建一个服务端口从而能够被ASP.Net页面通过jQuery的AJAX方法访问,我们将在客户端使用Ajax技术来 与WCF服务进行通信.这里我们仅使用jQuery去连接Web ...

  2. JQuery调用WCF服务

    一:创建一个wcf服务项目 [ServiceContract] public interface IService1 { [OperationContract] [WebInvoke(RequestF ...

  3. JQuery调用WCF服务,部署在iis

    Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...

  4. 实现在GET请求下调用WCF服务时传递对象(复合类型)参数

    WCF实现RESETFUL架构很容易,说白了,就是使WCF能够响应HTTP请求并返回所需的资源,如果有人不知道如何实现WCF支持HTTP请求的,可参见我之前的文章<实现jquery.ajax及原 ...

  5. 实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法

    关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...

  6. 实现jquery.ajax及原生的XMLHttpRequest调用WCF服务的方法

    废话不多说,直接讲解实现步骤 一.首先我们需定义支持WEB HTTP方法调用的WCF服务契约及实现服务契约类(重点关注各attribute),代码如下: //IAddService.cs namesp ...

  7. jquery或者JavaScript调用WCF服务的方法

    /****************************************************************** * Copyright (C): 一心堂集团 * CLR版本: ...

  8. iPhone中调用WCF服务

    本文介绍的是跨平台iPhone中调用WCF服务,WCF是由微软发展的一组数据通信的应用程序开发接口,它是.NET框架的一部分,由 .NET Framework 3.0+开始引入 iPhone中调用WC ...

  9. 不要在using语句中调用WCF服务

    如果你调用WCF服务时,像下面的代码这样在using语句中进行调用,需要注意一个问题. using (CnblogsWcfClient client = new CnblogsWcfClient()) ...

随机推荐

  1. 在电脑上安装Linux操作系统

    1硬件需求 A 一台电脑 B 一个优盘 2软件需求 A制作优盘启动盘的软件PowerISO BLinux操作系统的镜像文件 3安装PowerISO,并使用PowerISO A安装PowerISO B插 ...

  2. android viewpager切换到最后一页时,跳转至其他activity

    许许多多的qpp,在启动时会显示一些帮助页或者产品介绍什么的,通常滑动到最后一页时会有一个开始体验的按钮,用来跳转到app的主activity上,但是如果没有? 可以通过如下方法实现: 1.为View ...

  3. 3.1、Android Studio在虚拟机中运行应用

    Android虚拟机Monitor一个设备并且显示在你的开发计算机上.它可以允许你在不适用硬件设备的情况下开发.测试你的Android应用.虚拟机支持Android手机,Android Wear和平板 ...

  4. 嵌入式LINUX环境下视频采集知识

    V4L2是Linux环境下开发视频采集设备驱动程序的一套规范(API),它为驱动程序的编写提供统一的接口,并将所有的视频采集设备的驱动程序都纳入其的管理之中.V4L2不仅给驱动程序编写者带来极大的方便 ...

  5. OpenMP基础----以图像处理中的问题为例

        OpenMP2.5规范中,对于可以多线程执行的循环有如下5点约束: 1.循环语句中的循环变量必须是有符号整形,如果是无符号整形就无法使用,OpenMP3.0中取消了这个约束 2.循环语句中的比 ...

  6. iOS让软键盘消失的简单方法

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 一些文本输入控件等待输入时会弹出软键盘,我们可以设置这些控件的 ...

  7. JavaScript介绍-javaScript学习之旅(一)

    javaScript简介 1.javaScript是互联网上最流行的脚本语言,这门可用于web和html,更可广泛用于服务器端,pc端,移动端. 2.javaScript脚本语言: javaScrip ...

  8. 3、Android构建仪表测试

    不同于运行于JVM的本地单元测试,仪表测试运行于你的物理设备或虚拟机中.当你需要访问设备的信息(比如Context)或者使用真正的Android framework组件时(比如SharePrefere ...

  9. web中间件切换(was切tomcat)

    一.数据源迁移: ①数据源配置在web容器还是在项目本身? 根据开发与生产分离原则选择配置到web容器,以免开发泄露数据库密码. ②数据库密码加密 原先was的数据源直接在console控制,密码是密 ...

  10. Cocoa触发方法调用的几种方法

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博 1.SEL触发 SEL就是selector的缩写,它表示Cocoa中的方法选择器,不明白?那请仔细了解Objecti ...