博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
利用ScriptManager实现Javascript调用WebService中的方法
阅读量:4115 次
发布时间:2019-05-25

本文共 2032 字,大约阅读时间需要 6 分钟。

开发过程中,我们总想在前台直接调用后台的method,其原因无非是想控制页面刷新,改善用户体验。可以达到这个目的的方法有很多:Ajax应该是用的最多的情况.这里要说的是利用Javascript和webservice的交互来达到目的。

  1.当然要建立WebService(简便起见,WebService就建立在当前方案中):
 

using System;

using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

/** <summary>
/// WebService 的摘要描述
/// </summary>
///
[System.Web.Script.Services.ScriptService]  //注意要实现目的,这就必不可少

[WebService(Namespace = "")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebService : System.Web.Services.WebService ...{

    public WebService () ...{

        //如果使用設計的元件,請取消註解下行程式碼

        //InitializeComponent();
    }

    [WebMethod]

    public string sayhi(string name,string age)
    ...{
        //code here
        return "Hello,this is "+name+",i am"+age ;
    }
   
} 2.新建页面ajaxWebService.aspx,建立前台代码,其中要用ScriptManager对service进行注册。先看代码:

<%...@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxWebService.aspx.cs" Inherits="ajaxWebService" %>

<%...@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

    Namespace="System.Web.UI" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" >

<head runat="server">
    <title>未命名頁面</title>
   <script type="text/javascript" >...
  
    function check()
    ...{
      var name=document.getElementById("txtname").value;
      var age=document.getElementById("txtage").value;
     
      //最后一个参数为回调函数名称
      WebService.sayhi(name,age,updatepage);
    }
   
    //其中result即返回的结果
    function updatepage(result)
    ...{
      alert(result);
    }
   </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
          <Services >
            <asp:ServiceReference Path ="~/WebService.asmx" />
          </Services>
        </asp:ScriptManager>
        <input id="txtname" name="txtname" type="text" />
        <input id="txtage" name="txtage" type="text" />
        <input id="Button1" type="button" value="button" onclick ="check()" />
    </div>
    </form>
</body>
</html>

3.说明:

  除了上述两点需要注意外,还有一点需要强调一下:
  调用的方法很简单,[WebServiceName].[MethodName](...),其中的参数列中最后一项应该为回调函数名称。而回调函数的参数既是回传的结果。见上例。

 

 

转载地址:http://awupi.baihongyu.com/

你可能感兴趣的文章
走过 30 年的 Web 初心不再,但万维网之父坚信它还有救
查看>>
怎样高效入门 Vue?
查看>>
JS 引擎 V8 新机制:JIT-less 模式
查看>>
2019年哪些外快收入可达到2万以上?
查看>>
毕业10年,一个上海女程序员的职业之路—02
查看>>
互联网让铁饭碗再见!刚刚宣布!百万人或将无眠!
查看>>
【JavaScript 教程】标准库—Date 对象
查看>>
关于Vue 3.0前端开发者必须知道的不仅仅是Proxy...
查看>>
Sublime Text查找&替换
查看>>
前阿里手淘前端负责人@winter:前端人如何保持竞争力?
查看>>
【JavaScript 教程】面向对象编程——实例对象与 new 命令
查看>>
2019年哪些外快收入可达到2万以上?
查看>>
我在网易做了6年前端,想给求职者4条建议
查看>>
马云:无论被拒绝多少次,请相信自己
查看>>
面试加分项之 Nginx 反向代理与负载均衡
查看>>
我卖掉北京500万的房产,在老家生活的这两年……
查看>>
马云:我不为996辩护,我向奋斗者致敬
查看>>
零基础学网站制作系列教程-02
查看>>
不想工作了怎么破?那就去这4个地方看一看
查看>>
【JavaScript 教程】面向对象编程——this 关键字
查看>>