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
VS2010中使用Jquery调用Wcf服务读取数据库记录的更多相关文章
- jQuery调用WCF服务传递JSON对象
下面这个示例使用了WCF去创建一个服务端口从而能够被ASP.Net页面通过jQuery的AJAX方法访问,我们将在客户端使用Ajax技术来 与WCF服务进行通信.这里我们仅使用jQuery去连接Web ...
- JQuery调用WCF服务
一:创建一个wcf服务项目 [ServiceContract] public interface IService1 { [OperationContract] [WebInvoke(RequestF ...
- JQuery调用WCF服务,部署在iis
Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...
- 实现在GET请求下调用WCF服务时传递对象(复合类型)参数
WCF实现RESETFUL架构很容易,说白了,就是使WCF能够响应HTTP请求并返回所需的资源,如果有人不知道如何实现WCF支持HTTP请求的,可参见我之前的文章<实现jquery.ajax及原 ...
- 实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法
关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...
- 实现jquery.ajax及原生的XMLHttpRequest调用WCF服务的方法
废话不多说,直接讲解实现步骤 一.首先我们需定义支持WEB HTTP方法调用的WCF服务契约及实现服务契约类(重点关注各attribute),代码如下: //IAddService.cs namesp ...
- jquery或者JavaScript调用WCF服务的方法
/****************************************************************** * Copyright (C): 一心堂集团 * CLR版本: ...
- iPhone中调用WCF服务
本文介绍的是跨平台iPhone中调用WCF服务,WCF是由微软发展的一组数据通信的应用程序开发接口,它是.NET框架的一部分,由 .NET Framework 3.0+开始引入 iPhone中调用WC ...
- 不要在using语句中调用WCF服务
如果你调用WCF服务时,像下面的代码这样在using语句中进行调用,需要注意一个问题. using (CnblogsWcfClient client = new CnblogsWcfClient()) ...
随机推荐
- Android简易实战教程--第二十八话《加载大图片》
Android系统以ARGB表示每个像素,所以每个像素占用4个字节,很容易内存溢出.假设手机内存比较小,而要去加载一张像素很高的图片的时候,就会因为内存不足导致崩溃.这种异常是无法捕获的 内存不足并不 ...
- iOS开发之Xcode8推出的WKWebView与UIWebView的使用
一.整体介绍 UIWebView自iOS2就有,WKWebView从iOS8才有,毫无疑问WKWebView将逐步取代笨重的UIWebView.通过简单的测试即可发现UIWebView占用过多内存,且 ...
- 02_c3p0之c3p0-config.xml配置案例,操作c3p0的jdbcUtil工具类的编写
c3p0也是一个开源jdbc连接池,我们熟悉的Hibernate和Spring框架使用的都是该数据源. 这里获得数据源使用的方法是:ComboPooledDataSource 它提供的构造方法有 ...
- [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan ------------------ ...
- 【Android应用开发】Android Studio 错误集锦 -- 将所有的 AS 错误集合到本文
. 一. 编译错误 1. "AndroidManifest.xml file not found" 错误 (1) 报错信息 报错信息 : -- Message Make : Inf ...
- (七十八)使用第三方框架INTULocationManager实现定位
前面(第七十五.七十六篇)讲述了如何通过CoreLocation获取位置,授权.获取等相当复杂,如果借助于第三方框架,可以简单的实现授权与定位. 首先在GitHub中搜索LocationManager ...
- Dynamics CRM2013 附件禁用方案
CRM2013的附件功能和以往有了不同,把公告.活动.注释合在了一块并称注释,在使用的过程中会发现一个无语的地方,就算表单状态为停用,注释还是处于可编辑状态,而且也查询不到公开的方法来处理注释的,为了 ...
- iOS开发之五:常用控件--UITextField的使用
UITextField 是iOS开发中用的非常多的一种控件,主要是供用户输入单行信息的.下面来详细介绍UITextField. 1.常用属性 <span style="font-siz ...
- Java子类实例化的过程
//继承 class Work{ public Work(){ System.out.println("父类中的方法"); } } class Worker extends Wor ...
- 我眼中的Linux设备树(三 属性)
三 属性(property)device_type = "memory"就是一个属性,等号前边是属性,后边是值.节点是一个逻辑上相对独立的实体,属性是用来描述节点特性的,根据需要一 ...