zoukankan      html  css  js  c++  java
  • 一个简单的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>

      测试成功:

      

  • 相关阅读:
    numpy之数组属性与方法
    numpy之数组创建
    matplotlib之直方图
    matplotlib之条形图
    matplotlib之散点图
    matplotlib之折线图
    Kettle使用教程之数据同步
    Kettle使用教程之Job使用
    Kettle使用教程之安装与资源库的创建
    Ubuntu16.04配置单机版Zookeeper和Kafka
  • 原文地址:https://www.cnblogs.com/muyixiaoguang/p/3858709.html
Copyright © 2011-2022 走看看