首先新建项目，这里有两种调用方式，为了能方便理解，新建页面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. 一鼓作气 博客--第七篇 note7

    面向对象相关知识简介 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公用的.类变量定义 ...

  2. java 引入自定义字体font后出现的硬盘吃光的问题

    有个需求要用美术字体在图片上写字 用自定义的文字有两个方法: 1. Font dynamicFont = Font.createFont(Font.TRUETYPE_FONT, InputStream ...

  3. Call for Papers International Conference for Smart Health (ICSH) 2014

    Call for PapersInternational Conference for Smart Health (ICSH) 2014 Beijing, China July 10-11, 2014 ...

  4. PHP中Strict Standards错误解决方法二

    在PHP5.3.3 中安装wordpress 3.0.1 ,在安装时出现错误:Strict Standards: PHP Strict Standards: Declaration of Walker ...

  5. 公司内部培训AlwaysOn PPT分享

    公司内部培训AlwaysOn PPT分享 下载地址: http://files.cnblogs.com/files/lyhabc/alwayson.ppt

  6. Event Store 2.0发布，带来了安全支持和测试版Projections库

    Event Store 2.0版本于上周发布,它带来了安全支持允许锁定Event Store和在事件流上设置访问控制列表.其主要新特性包括: HTTP和TCP之上的身份认证,包括账户管理 测试版Pro ...

  7. Guava monitor

    Guava的com.google.util.concurrent类库提供了相对于jdk java.util.concurrent包更加方便实用的并发类,Monitor类就是其中一个.Monitor类在 ...

  8. 企业IT管理员IE11升级指南【3】—— IE11 新的GPO设置

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  9. ASP.NET MVC 控制器激活(二)

    ASP.NET MVC 控制器激活(二) 前言 在之前的篇幅中,用文字和图像来表示了控制器的激活过程,描述的角度都是从框架默认实现的角度去进行描述的,这样也使得大家都可以清楚的知道激活的过程以及其中涉 ...

  10. Christmas Trees, Promises和Event Emitters

    今天有同事问我下面这段代码是什么意思: var MyClass = function() { events.EventEmitter.call(this); // 这行是什么意思? }; util.i ...