JQuery 调用 WCF示例

最新推荐文章于 2021-06-22 05:07:07 发布

君望永远

最新推荐文章于 2021-06-22 05:07:07 发布

阅读量856

点赞数

分类专栏： ASP.NET VB.NET .NET开发文章标签： jquery wcf function compilation behavior service

.NET开发同时被 2 个专栏收录

262 篇文章 0 订阅

订阅专栏

ASP.NET VB.NET

45 篇文章 0 订阅

订阅专栏

写一个最为简单的JQuery 调用 WCF 示例：

1.新建一个WCF应用程序

2.新建一个html文件

3.引入jQuery

建立好后如下图示：

（我将所有WCF服务的接口写在一个ILib中）

写代码

1)ICarService如下：

using System.Collections.Generic;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;

namespace aco.service
{
    // 注意: 使用“重构”菜单上的“重命名”命令，可以同时更改代码和配置文件中的接口名“IService”。
    [ServiceContract]
    public interface ICarService
    {

        [OperationContract]
        void Save(Car c);
        [OperationContract]
        //[WebGet(RequestFormat = WebMessageFormat.Xml, ResponseFormat = WebMessageFormat.Xml)]
        [WebGet()]
        Car GetCar(string id);
        [OperationContract]
        //[WebGet(RequestFormat = WebMessageFormat.Xml, ResponseFormat = WebMessageFormat.Xml)]
        [WebGet()]
        List<Car> GetCarList();

        // TODO: 在此添加您的服务操作
    }
    [DataContract(Namespace = "http://www.aco.org/")]
    public class Car
    {
        [DataMember]
        public string Name { get; set; }
        [DataMember]
        public Color Color { get; set; }
        [DataMember]
        public Engin Engin { get; set; }
    }
    public class Engin
    {
        public int Weight { get; set; }
        public Color LinColor { get; set; }
    }
    public class Color
    {
        public int R { get; set; }

        public int G { get; set; }

        public int B { get; set; }
    }
}
（注：在以上文件中的注释部分可以理解为）OtherWay

2)Service.cs 如下

using System;
using System.Collections.Generic;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using aco.service;

namespace aco.service
{
    // 注意: 使用“重构”菜单上的“重命名”命令，可以同时更改代码、svc 和配置文件中的类名“Service”。
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class CarService : ICarService
    {
        private Car currentCar = null;
        public void Save(Car c)
        {
            this.currentCar = c;
        }
        public Car GetCar(string id)
        {
            Color cl1 = new Color() { R = 255, G = 255, B = 255 };
            Engin e1 = new Engin() { Weight = 300, LinColor = cl1 };

            Car c1 = new Car();
            c1.Name = "Binz 600"+"     所取Car的编号为"+id;
            c1.Color = cl1;
            c1.Engin = e1;
            return c1;
        }
        public List<Car> GetCarList()
        {
            List<Car> lst = new List<Car>();
            Color cl1 = new Color() { R = 255, G = 255, B = 255 };
            Color cl2 = new Color() { R = 138, G = 223, B = 232 };
            Engin e1 = new Engin() { Weight = 300, LinColor = cl1 };
            Engin e2 = new Engin() { Weight = 400, LinColor = cl2 };
            Car c1 = new Car();
            Car c2 = new Car();
            c1.Name = "Binz 600";
            c2.Name = "Mazda 6";
            c1.Color = cl1;
            c2.Color = cl2;
            c1.Engin = e1;
            c2.Engin = e2;
            lst.Add(c1);
            lst.Add(c2);
            return lst;
        }
    }
}

3)写idx.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 runat="server">
    <script src="js/jquery-1.4.1.js" type="text/javascript"></script>
    <title>我的JQuery WCF测试</title>
    <style type="text/css">
        #outPut {
            width: 239px;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $("#btnOK").click(function () {
                //ajax operation
                var carId = $("#carID").val();
                alert(carId);
                $.ajax({
                    type: "GET",
                    url: "Service.svc/GetCar",
                    data: { "id": carId }, //Get方式时的json格式数据参数方式
                    contentType: "application/json; charset=utf-8", //发给服务器端的数据格式.WebService 会返回Json类型必须加上
                    //这里有两种不同的返回数据格式,若为json服务端也要做相应配置
                    //dataType: 'json',
                    dataType: "text/xml",
                    processdata: "false",
                    success: function (result) {
                        //var car = result.d;
                        //alert(car); //返回数据
                        //如果为xml 则直接写出
                        alert(result);
                    },
                    error: function (xhr) {
                        alert("Error Occuerred");
                    }
                })
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <p>Car ID：<input type="text" id="carID" /></p>

     <p><input type="button" id="btnOK" value="查看结果" /></p>
    </div>
    </form>
</body>
</html>

4）写Service.svc

<%@ ServiceHost Language="C#" Debug="true" Service="aco.service.CarService" %>

5)写web.config

<?xml version="1.0"?>
<configuration>

    <system.web>
        <compilation debug="true" targetFramework="4.0" />
    </system.web>

<system.serviceModel>
    <behaviors>
      <endpointBehaviors>
        <behavior name="CarServiceEndpointBehavior">
          <webHttp />
        </behavior>
      </endpointBehaviors>
      <serviceBehaviors>
        <behavior name="CarBehavior">
          <serviceMetadata httpGetEnabled="true" httpsGetEnabled="false" />
          <serviceDebug />
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <services>
      <service behaviorConfiguration="CarBehavior" name="aco.service.CarService">
        <endpoint address="" behaviorConfiguration="CarServiceEndpointBehavior"
          binding="webHttpBinding" bindingConfiguration="" name="CarServiceEndpoint"
          contract="aco.service.ICarService" />
      </service>
    </services>
</system.serviceModel>
</configuration>

Ok,that is all.

如下就是运行后的FF结果：

君望永远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 调用 WCF示例

写一个最为简单的JQuery 调用 WCF 示例：1.新建一个WCF应用程序2.新建一个html文件3.引入jQuery建立好后如下图示：（我将所有WCF服务的接口写在一个ILib中）写代码1)ICarService如下：using System.Collections.Generic;using System.Runtime.Serialization;
复制链接

扫一扫