jquery 直接调用 wcf,面向服务的SOA架构 ( 第三天)

所谓万事 具备,只欠东风了!! 接下来就是 wcf 的调用,

首先 在客户端下,随便 写一个 html页面,然后写入如下方法:

<script src="scripts/jquery.min.js"></script>  ---这里必须得先导入 jquery 的插件

//下面这个方法是 获得网站的 相对路径

$.getrooturl = function () {
            return window.location.protocol + "//" + window.location.host;
        }

接下来我们来写  一个js方法

  function getdate() {
            var url = $.getrooturl() + "/WebService.svc/operate/select";    //这个是 我们访问的路劲            //这个是数据库的名字              var database = "vbk";              //这个是后台我们要执行的 方法名字                      var method = "select";
            //这里是你要写入的sql 语句

            var sql = $("#txt_sql").val();
            $.ajax({
                url: url,
                contentType: "application/json",
                            data: ‘{"database":"vbk" ,"method":"select","sql":"‘+sql+‘"}‘,
                type: "post",
                success: function (data) {
                    var datatable = eval(data)[0].data;
                    var html = jsonToTable(datatable);
                    $("#table").html(html);
                },
                error: function (err) {
                    $("#table").html(err.responseText);
                }
            });

        }

接下来 我们要做的就是 怎么将让查询变的更简单:(直接将JSON数据变成table)

  function jsonToTable(json) {
            var cols = new Array();
            $.each(json[0], function (index, value) {
                // cols[cols.length] = value;
                cols.push(index);
            });
            shtml = "<table border=1><tr>";          //create header row - save html of table in shtml
            for (i = 0; i < cols.length; i++) {
                shtml += "<th>" + cols[i] + "</th>";
            }
            shtml += "</tr>";
           // var irowmax = myJSONobj.records.length;
            for (irow = 0; irow < json.length; irow++) {  //add the rows
                shtml += "<tr>";
                for (i = 0; i < cols.length; i++) {
                    shtml += "<td>" + $( json[irow]).attr([cols[i]]) + "</td>";
                }
                shtml += "</tr>";
            }
            shtml += "</table>";
            return shtml;
        }

另外我附加 body里面的代码:

<body>
    <input  type="text" style="width:200px "  id="txt_sql"  value="select * from dbo.MdcDatKanBan"/>
     <input  type="button" value="获取数据"  onclick="getdate()"/>
    <div  id="table">

    </div>
</body>

接下来我们来看下效果:(另外告诉大家,由于不同的电脑不同的配置,修改下你的配置文件就可以使用了)

写入你的sql语句,然后点击获取数据,就可以看到你要写的效果了。

VS2012版本源码下载:

http://files.cnblogs.com/files/liujing379069296/Vs2012Client.rar

vs2010 源码下载

http://files.cnblogs.com/files/liujing379069296/VS2010Client.rar

时间: 2024-11-09 19:55:06

jquery 直接调用 wcf,面向服务的SOA架构 ( 第三天)的相关文章

面向服务的体系架构SOA

面向服务的体系架构SOA 序言 在.Net的世界中,一提及SOA,大家想到的应该是Web Service,WCF,还有人或许也会在.NET MVC中的Web API上做上标记,然后泛泛其谈! 的确,微软的这些技术也确实推动着面向服务的世界发展,当然除了微软还有很多面向服务的开源技术,甚至在某些方面比微软做的更加优秀.那么什么是面向服务,面向服务的存在是为了解决什么问题呢? 说说SOA面向服务 SOA是由Garnter在1996年提出的一个概念,旨在让软件变的有弹性,能够迅速响应业务的需求,实现实

面向服务的体系架构(SOA)—架构篇

面向服务的体系架构(SOA)-架构篇 1.面向服务的体系架构(SOA) 面向服务的架构(service-oriented architecture)是Gartner于2O世纪9O年代中期提出的面向服务架构的概念.2002年的l2月,Gartner提出"面向服务的架构(SOA)"是"现代应用开发领域最重要的课题"之后.国内外计算机专家.学者掀起了对SOA的积极研究与探索. 在分布式的环境中,将各种功能都以服务的形式提供给最终用户或者其他服务.如今,企业级应用的开发都采

SOA——面向服务的体系架构

上一篇博文中提到了"紧耦合"的现象,如何解决?SOA,采用面向服务的体系架构. 一.What? SOA=Service-oriented Architecture面向服务的体系结构 SOA是一个组件模型,它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的接口和契约联系起来. 我个人更加倾向于这样的一种解释:SOA是指为了解决在Internet环境下业务集成的需要,通过连接能完成特定任务的独立功能实体实现的一种软件系统架构. 所以,SOA是什么?SOA不是一种语言,也不是一

VS2008非托管C++调用wcf(WebService)服务

在Visual Studio 2008以及以后版本中,微软停止了非托管C++的直接WebService引用.不过ATL Server代码已经托管到开源网站上,我们可以找到ATL Server的源代码,编译出Sproxy.exe,这个工具可以根据wsdl文件来生成非托管的代理类.这个代理类还需要配合一些头文件才能一起使用,这个相关的头文件都包含在ATL Server的源代码内. 1.第一步需要使用sproxy.exe工具来生成代理类.在vs2008以前的版本,比如vs2005,本身就带有这个命令,

JQuery Ajax调用WCF实例以及遇到的问题

1.遇到的最多的问题就是跨域问题,这个时间需要我们添加如下代码解决跨域的问题 第一步:在服务类加Attribute [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 第二步:在构造函数中添加 if (WebOperationContext.Current != null) { WebOperationContext.Current.OutgoingRe

在 Node.js 上调用 WCF Web 服务

var BasicHttpBinding = require('wcf.js').BasicHttpBinding , Proxy = require('wcf.js').Proxy , binding = new BasicHttpBinding( { SecurityMode: "TransportWithMessageCredential" , MessageClientCredentialType: "UserName" }) , proxy = new P

微服务以及SOA架构

Docker Docker解决了微服务架构下,服务的粒度细服务数量多所导致的开发环境搭建,部署以及运维成本高的问题,也可以大大降低随着微服务数量增多所导致的节点数量增多的成本. SOA vs 微服务 SOA:将服务分解成多个子系统来实现,粒度比较大,基于企业服务总线,集中式的服务架构,属于单块架构系统,相互依赖,部署复杂,集成方式依赖于SOAP/ESB/WS等重量级协议: 微服务则自底向上开展实施,一个系统被才分成多个粒度精细的服务,集成方式为HTTP/REST/JSON轻量级协议,无集中式总线

js调用wcf 的SOA

jquery 调用wcf 的SOA架构,将三层架构运用到SOA的架构中来 经过前面3天的学习,我想大家应该对SOA的架构有了初步的了解,其实 SOA与三层架构并不冲突,而是三层架构的升级版. 来看下传统的三层架构! 一共可以分为4个层: 模型层(可有可无),客户端,服务端,公共层. 我们在原有的三层架构的基础上,我们增加一个服务中转层! 然后客户端 通过 调用 服务中转,然后在调用  服务层,因为客户端可以有多个,可以是安卓,可以是IOS, 可以是电脑,可以是linux, 因为这个不管是什么样的

微服务浅述---架构演进

微服务浅述---架构演进 提到架构演进,我们很容易想到'单体应用---分布式/SOA---微服务'的演进过程,那么为什么会有这个必然演进?演进的过程中遇到了哪些坑?是怎么解决这些坑的? 为什么会有这个必然的架构演进? 因为痛点驱动.因为互联网公司很容易突然爆发,今年的数据量可能比去年的数据量翻上N倍.那么刚开始的时候公司用的是单体架构,即一个业务逻辑一撸到底.比如电商公司,从前端商品展示,购物车,下单,订单生成,发货,物流等等这些业务逻辑 全部写在一个工程内,数据放在一个库内,部署在一个服务器上