一个简单的Webservice的demo(中)_前端页面调用
首先新建项目，这里有两种调用方式，为了能方便理解，新建页面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(中)_前端页面调用的更多相关文章
- 一个简单的webservice的demo（下）winform异步调用webservice
绕了一大圈,又开始接触winform的项目来了,虽然很小吧.写一个winform的异步调用webservice的demo,还是简单的. 一个简单的Webservice的demo,简单模拟服务 一个简单 ...
- 一个简单的Webservice的demo,简单模拟服务
前段时间一直在学习WCF,匆匆忙忙的把<WCF全面解析>和<WCF服务编程>看了一遍,好多东西都不是很懂,又听了一下WCF分布式开发的网络教程,算是马马虎虎的明白点了.回顾了一 ...
- （转）Web Service入门简介(一个简单的WebService示例)
Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...
- 利用VS2008发布一个简单的webservice
一个开发好的webservice,怎样发布出去,供其他电脑访问呢? 本文将介绍如何发布一个简单的webservice,其中的内容都是在网上查看别人文章,自己仿照着做了一遍,因此,难免会发生错误,如果发 ...
- Web Service入门简介(一个简单的WebService示例)
Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...
- 一个简单的WebService实例
WebService在.NET平台下的作用是在不同应用程序间共享数据与数据交换. 要达到这样的目标,Web services要使用两种技术: XML(标准通用标记语言下的一个子集):XML是在web上 ...
- 在Angular.js中的H5页面调用Web api时跨域问题处理
/// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...
- 使用Axis2创建一个简单的WebService服务
使用过Java进行过WebService开发都会听过或者接触过Apache Axis2,Axis2框架是应用最广泛的WebService框架之一了. 这里使用Axis2来开发和部署一个最简单的WebS ...
- 一个简单的webservice调用
我们先创建一个简单空web应用程序 然后添加新建项目 //我们创建一个peson对象,产生数据标识返回 using System; using System.Collections.Generic; ...
随机推荐
- linux 上安装redis
下载地址:http://redis.io/download,下载最新文档版本. 本教程使用的最新文档版本为 2.8.17,下载并安装: $ wget http://download.redis.io/ ...
- linux内核分析作业6：分析Linux内核创建一个新进程的过程
task_struct结构: struct task_struct { volatile long state;进程状态 void *stack; 堆栈 pid_t pid; 进程标识符 u ...
- window下搭建c开发环境（GNU环境的安装）
一.在windows平台上安装GNU环境 windows操作系统不自带GNU环境,如果需要开发跨平台的C语言程序,那么需要给windows安装GNU环境 windows下的两款GNU环境:MinGW和 ...
- Android零散
2016-03-13 Android零散 ListView中嵌套GridView 要实现分组列表这样的效果:点击ListView中的分组名称,即展开此分组显示其包含的项目.使用ExpandableLi ...
- GOTO Berlin: Web API设计原则
在邮件列表和讨论区中有很多与REST和Web API相关的讨论,下面仅是我个人对这些问题的一些见解,并没有绝对的真理,InnoQ的首席顾问Oliver Wolf在GOTO Berlin大会上开始自己的 ...
- 配置NHibernate将枚举保存为Oracle数据库中的字符串
假设有这样一个枚举: /// <summary> /// 字典项类型 /// </summary> public enum DicItemType { [EnumDescrip ...
- CSharpGL(4)设计和使用Camera
CSharpGL(4)设计和使用Camera +BIT祝威+悄悄在此留下版了个权的信息说: 主要内容 描述在OpenGL中Camera的概念和用处. 设计一个Camera以及操控Camera的Sate ...
- 允许Sublime编辑器在Ubuntu上输入中文
Sublime Text是一款功能非常强大的轻量级代码编辑器,有关功能介绍和使用可以看我另一篇文章的描述http://www.cnblogs.com/jaxu/p/5037547.html 不过,在U ...
- 《Entity Framework 6 Recipes》中文翻译系列 (17) -----第三章 查询之分页、过滤和使用DateTime中的日期部分分组
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-12 分页和过滤 问题 你想使用分页和过滤来创建查询. 解决方案 假设你有如图3 ...
- 《Spark快速大数据分析》—— 第七章 在集群上运行Spark