首先新建项目，这里有两种调用方式，为了能方便理解，新建页面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. PHP的FastCGI

    CGI全称是“通用网关接口”(Common Gateway Interface), 它可以让一个客户端,从网页浏览器向执行在Web服务器上的程序请求数据. CGI描述了客户端和这个程序之间传输数据的一 ...

  2. Excel导入导出组件的设计

    前言: 距离一篇文章,又八九个月过去了,随着在园子露脸的次数越来越少,正如我们淡忘上一波大神那样,我们也正下一波所淡忘. 这八九个月,前前后,游走在十来个项目上,忙,却找不到成就感. 人过30后,也是 ...

  3. 基于Mono跨平台移动应用开发框架发布Xamarin 3.0

    跨平台移动应用开发框架Xamarin可以让你完全用C#编写你的应用程序,在iOS.Android.Windows Phone 8.Windows8和mac平台上共享相同的代码.你可以重用你最喜欢的.N ...

  4. AutoMapper使用手册(一)

    阅读目录 1. 介绍 2. 基本使用 3. 自动分割映射(Flattening) 4. 自定义字段映射(Projection) 5. 验证配置(Configuration validation) 介绍 ...

  5. How.To.Process.Image.Infomation.Of.Rotate.And.Flip.From.Server

    需求说明 客户端接收到服务器传送过来的图像数据,客户端通过对图像进行旋转和反转操作. 然后把这个旋转和反转的数据上传到服务器. 客户端在接收图像的时候, 也会下载以前的旋转和反转参数, 然后客户端根据 ...

  6. 搞懂 SynchronizationContext（第一部分）【翻译】

    SynchronizationContext -MSDN 很让人失望 我不知道为什么,目前在.Net下关于这个类只有很少的资料.MSDN文档也只有很少的关于如何使用SynchronizationCon ...

  7. 我也来说说DDD~大话目录

    回到占占推荐博客索引 DDD之前没有接触过,但一但有了接触就一发不可收拾,他会带去进入一个全新的世界! DDD不是新技术,而是新思想,新模式,是软件开发领域的一次突破,它更接近于业务,对于业务的改动它 ...

  8. addUser

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Nginx负载均衡的详细配置及使用案例详解.

    感谢看过这一些列博文和评论的小伙伴, 我把自己所看到的学到的拿到这里来分享是想和大家一起学习进步, 想听听园友给出的意见, 也是对自己学习过程的一个总结. 技术无止境, 我们仍需努力! 1,话不多说, ...

  10. CI Weekly #3 | 关于微服务、Docker 实践与 DevOps 指南

    CI Weekly 围绕『 软件工程效率提升』 进行一系列技术内容分享,包括国内外持续集成.持续交付,持续部署.自动化测试. DevOps 等实践教程.工具与资源,以及一些工程师文化相关的程序员 Ti ...