首先新建项目，这里有两种调用方式，为了能方便理解，新建页面WebserviceTest如下图：

　　

　　先引用写好的服务，这里用上次写好的服务。见上次写的一个简单的Webservice的demo,简单模拟服务。

　　　

　　这里我们要新建一个服务，调用我们引用给服务。因为一般情况下js不能跨域访问服务的，当然，只是一般，要非得跨域访问也行，网上搜方法，但是那样做就没意义了。新建服务，取名MyJsWebservice，如下图：

　　

　　在服务中调用引用的服务，并将Ajax脚本调用改取消的注释取消。如下图：

　　

　　生成以下解决方案，现在我们在页面上调用。使用jQuery，Ajax调用。

　　前端代码：　　

 <head runat="server">

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>WebserviceTest</title>

     <script src="jquery-1.7.2.min.js"></script>

     <script type="text/javascript">

         $(function () {

             $("#btnSure").click(function () {

                 var birthday = $("#birthday").val();

                 $.ajax({

                     type: "Post", //Post传参

                     url: "/MyJsWebservice.asmx/WhoAreYou",//服务地址

                     data: "{birthday:'"+birthday+"'}",//参数

                     dataType: "json",

                     contentType: "application/json;charset=utf-8",

                     success: function (result) {

                         // 调用成功后，将获取的名字填入name文本框中。

                         $("#name").val(result.d);

                     },

                     error: function (e) {

                         window.alert(e.status);

                     }

                 })

             })

         })

     </script>

 </head>

 <body>

     <form id="form1" runat="server">

     <div>

         请输入您的生日：

         <input type="text" id="birthday" />

         <input type="text" id="name" /><input type="button" id="btnSure" value="确 定" />

     </div>

     </form>

 </body>

　　测试成功：

　　

一个简单的Webservice的demo(中)_前端页面调用的更多相关文章

  1. 一个简单的webservice的demo（下）winform异步调用webservice

    绕了一大圈,又开始接触winform的项目来了,虽然很小吧.写一个winform的异步调用webservice的demo,还是简单的. 一个简单的Webservice的demo,简单模拟服务 一个简单 ...

  2. 一个简单的Webservice的demo,简单模拟服务

    前段时间一直在学习WCF,匆匆忙忙的把<WCF全面解析>和<WCF服务编程>看了一遍,好多东西都不是很懂,又听了一下WCF分布式开发的网络教程,算是马马虎虎的明白点了.回顾了一 ...

  3. （转）Web Service入门简介(一个简单的WebService示例)

    Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...

  4. 利用VS2008发布一个简单的webservice

    一个开发好的webservice,怎样发布出去,供其他电脑访问呢? 本文将介绍如何发布一个简单的webservice,其中的内容都是在网上查看别人文章,自己仿照着做了一遍,因此,难免会发生错误,如果发 ...

  5. Web Service入门简介(一个简单的WebService示例)

    Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...

  6. 一个简单的WebService实例

    WebService在.NET平台下的作用是在不同应用程序间共享数据与数据交换. 要达到这样的目标,Web services要使用两种技术: XML(标准通用标记语言下的一个子集):XML是在web上 ...

  7. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  8. 使用Axis2创建一个简单的WebService服务

    使用过Java进行过WebService开发都会听过或者接触过Apache Axis2,Axis2框架是应用最广泛的WebService框架之一了. 这里使用Axis2来开发和部署一个最简单的WebS ...

  9. 一个简单的webservice调用

    我们先创建一个简单空web应用程序 然后添加新建项目 //我们创建一个peson对象,产生数据标识返回 using System; using System.Collections.Generic; ...

随机推荐

  1. RunLoop

    一.什么是RunLoop 从字面意思理解:运行循环.跑圈. 基本作用: 保持程序(应用)的持续运行. 处理程序(APP)中的各种事件(比如:触摸事件.定时事件.Selector事件等) 节省CPU资源 ...

  2. TestNG Assert 详解

    org.testng.Assert 用来校验接口测试的结果,那么它提供哪些方法呢? 中心为Assert测试类,一级节点为方法例如assertEquals,二级结点为参数类型及参数个数,double 3 ...

  3. for循环中的占位 pass

  4. 学习笔记：java并发编程学习之初识Concurrent

    一.初识Concurrent 第一次看见concurrent的使用是在同事写的一个抽取系统代码里,当时这部分代码没有完成,有许多的问题,另一个同事接手了这部分代码的功能开发,由于他没有多线程开发的经验 ...

  5. Entity Framework Code First数据库连接

    1. 安装Entity Framework 使用NuGet安装Entity Framework程序包:工具->库程序包管理器->程序包管理器控制台,执行以下语句: PM> Insta ...

  6. HTTPS那些事（二）SSL证书（转载）

    原创地址:http://www.guokr.com/post/116169/   从第一部分HTTP工作原理中,我们可以了解到HTTPS核心的一个部分是数据传输之前的握手,握手过程中确定了数据加密的密 ...

  7. spring官网下载

    1.第一步:打开官网:http://projects.spring.io/ 2.第二步:点击“SPRING FRAMEWORK”图片 3.第三步:点击“小猫”图标 4.第四步:拉到页面中部的位置,找到 ...

  8. 2013 duilib入门简明教程 -- 完整的自绘标题栏(8)

        看了前面那么多教程,相信对duilib已有基本映像了,我们就快马加鞭,做出一个完整的自绘标题栏吧~     看到下面这个效果图,小伙伴们是不是有点惊呆了呢~O(∩_∩)O~       dui ...

  9. iOS 真机调试不能连接网络的排错过程

    开发环境: macOS 10.12.1 Xcode 8.1 Qt 5.8 gSOAP 2.8 iPhone 6S+iOS 10.1.1   问题: 使用 Qt Quick 写了一个跨平台的应用,在Wi ...

  10. Windows无法安装到这个磁盘。请确保在计算机的BIOS菜单中启用了磁盘控制器

    今天一朋友问我这个问题,呃,以前我也遇到过,但忘记记录了,这次就记录一下吧,就懒得打字了,图片里面很清楚了 不说点什么的话是不是太水了O(∩_∩)O~,好吧扩充一下: Windows无法安装到这个磁盘 ...