一个简单的Webservice的demo(中)

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

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

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

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

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

　　前端代码：　　

 1 <head runat="server">
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 3     <title>WebserviceTest</title>
 4     <script src="jquery-1.7.2.min.js"></script>
 5     <script type="text/javascript">
 6         $(function () {
 7             $("#btnSure").click(function () {
 8                 var birthday = $("#birthday").val();
 9                 $.ajax({
10                     type: "Post", //Post传参
11                     url: "/MyJsWebservice.asmx/WhoAreYou",//服务地址
12                     data: "{birthday:'"+birthday+"'}",//参数
13                     dataType: "json",
14                     contentType: "application/json;charset=utf-8",
15                     success: function (result) {
16                         // 调用成功后，将获取的名字填入name文本框中。
17                         $("#name").val(result.d);
18                     },
19                     error: function (e) {
20                         window.alert(e.status);
21                     }
22                 })
23             })
24         })
25     </script>
26 </head>
27 <body>
28     <form id="form1" runat="server">
29     <div>
30         请输入您的生日：
31         <input type="text" id="birthday" />
32         <input type="text" id="name" /><input type="button" id="btnSure" value="确 定" />
33     </div>
34     </form>
35 </body>

　　测试成功：

转载于:https://www.cnblogs.com/muyixiaoguang/p/3858709.html

一个简单的Webservice的demo(中)_前端页面调用相关推荐

java前端页面调用webservice_一个简单的Webservice的demo(中)_前端页面调用
首先新建项目,这里有两种调用方式,为了能方便理解,新建页面WebserviceTest如下图: 这里我们要新建一个服务,调用我们引用给服务.因为一般情况下js不能跨域访问服务的,当然,只是一般,要非得 ...
一个简单的Webservice的demo,简单模拟服务
前段时间一直在学习WCF,匆匆忙忙的把<WCF全面解析>和<WCF服务编程>看了一遍,好多东西都不是很懂,又听了一下WCF分布式开发的网络教程,算是马马虎虎的明白点了.回顾了一 ...
Web Service入门简介(一个简单的WebService示例)
一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intrane ...
swift for循环_Swift | 实战一个简单的素数计算器demo
Swift 实战一个简单的素数计算器demo 本期我们来介绍如何用storyboard来实现一个素数计算器demo,storyboard可以明确地知道界面上的组件与代码的关系,而且比起仅用代码写要方便 ...
UIAutomator2 一个简单的练手demo，自动刷东方头条
UIAutomator2 一个简单的练手demo,自动刷东方头条兼容不是很好,还有情况没有写 import uiautomator2 as u2 import timen = 0#连接设备 # if ...
创建一个简单的springboot项目demo
springboot的核心功能: 1:起步依赖 2:核心注入; 创建一个简单的springboot项目demo步骤: 1:创建一个maven项目 2:pom.xml添加起步依赖 <parent& ...
Qt + Opencv 实现的一个简单文字识别的demo
Qt + Opencv 实现的一个简单文字识别的demo 很久没用Qt了,这两天结合Opencv整了一个简单文字识别的demo,太久没用了,很多东西都忘记了,中间碰到了几个不大不小的坑,最后都解决了, ...
使用Ant Design Pro，一个企业级开箱即用的中后台前端
#目录 ** 此文仅是个人自学理解的学习笔记,若有不对之处敬请指导更正,谢谢! ** 文章目录 @[toc] Ant Design Pro 了解知识储备安装使用方法一:clone 实践 ESli ...
一个简单的WebService调用天气预报接口的demo
很长一段时间没更新博客了,最近刚跳槽成功,工作也慢慢稳定下来了,后面也会陆陆续续更新. 现在的公司用到了WebService,以前没用过,所以学习一下记录下来. 什么是WebService? 首先附上 ...

一个简单的Webservice的demo(中)_前端页面调用

一个简单的Webservice的demo(中)_前端页面调用相关推荐

最新文章

热门文章