`
backspace
  • 浏览: 137141 次
文章分类
社区版块
存档分类
最新评论

JQuery调用WebService

 
阅读更多

前台:

<script type= " text/javascript " >
    $(function () {
        $( " #btn1 " ).click(function () {            // 不带参数
            $.ajax({
                type:  " POST " ,
                url:  " WebService1.asmx/HelloWorld " ,
                dataType:  " json " ,
                contentType:  " application/json; charset=utf-8 " ,
                success: function (json) { alert(json.d); },
                error: function (error) {
                    alert( " 调用出错 "  + error.responseText);
                }
            });
        });
        $( " #btn2 " ).click(function () {            // 带参数
            $.ajax({
                type:  " POST " ,
                url:  " WebService1.asmx/ReturnString " ,
                data:  " {s:' "  + $( " #txt " ).val() +  " '} " ,
                dataType:  " json " ,
                contentType:  " application/json; charset=utf-8 " ,
                success: function (json) { alert(json.d); },
                error: function (error) {
                    alert( " 调用出错 "  + error.responseText);
                }
            });
        });
        $( " #btn3 " ).click(function () {            // 对象
            $.ajax({
                type:  " POST " ,
                url:  " WebService1.asmx/ReturnDomain " ,
                data:  " {} " ,
                dataType:  " json " ,
                contentType:  " application/json; charset=utf-8 " ,
                success: function (json) { alert(json.d.Name + json.d.Age); },
                error: function (error) {
                    alert( " 调用出错 "  + error.responseText);
                }
            });
        });
        $( " #btn4 " ).click(function () {            // 对象集合
            $.ajax({
                type:  " POST " ,
                url:  " WebService1.asmx/ReturnList " ,
                data:  " {} " ,
                dataType:  " json " ,
                contentType:  " application/json; charset=utf-8 " ,
                success: function (json) {
                    $.each(json.d, function (key, value) {
                        alert(value.Name + value.Age);
                    });
                },
                error: function (error) {
                    alert( " 调用出错 "  + error.responseText);
                }
            });
        });
         // 返回DataTable(XML)
        $( ' #btn5 ' ).click(function () {
            $.ajax({
                type:  " POST " ,
                url:  " WebService1.asmx/ReturnXML " ,
                data:  " {} " ,
                dataType:  ' xml ' // 返回的类型为XML
                success: function (result) {
                     try  {
                        $(result).find( " xmltest " ).each(function () {
                            alert($( this ).find( " Name " ).text() +  "   "  + $( this ).find( " Age " ).text());
                        });
                    }
                     catch  (e) {
                        alert(e);
                         return ;
                    }
                },
                error: function (result, status) {  // 如果没有上面的捕获出错会执行这里的回调函数
                     if  (status ==  ' error ' ) {
                        alert(status);
                    }
                }
            });
        });
    });

</script>

<div>
    <p>
        <input type= " button "  id= " btn1 "  value= " 不带参 "  />
    </p>
    <p>
        <input type= " button "  id= " btn2 "  value= " 带参 "  />
        <input type= " text "  id= " txt "  /></p>
    <p>
        <input type= " button "  id= " btn3 "  value= " 对象 "  />
    </p>
    <p>
        <input type= " button "  id= " btn4 "  value= " 集合 "  />
    </p>
    <p>
        <input type= " button "  id= " btn5 "  value= " XML "  />
    </p>

</div> 

后台WebService:

///   <summary>
///  WebService1 的摘要说明
///   </summary>
[WebService(Namespace =  " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem( false )]
//  若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public  class  WebService1 : System.Web.Services.WebService
{

     public  class  User
    {
         public  string  Name
        {
             get ;
             set ;
        }
         public  int  Age
        {
             get ;
             set ;
        }
    }
     ///   <summary>
    
///  返回字符串
    
///   </summary>
    
///   <returns></returns>
    [WebMethod]
     public  string  HelloWorld()
    {
         return  " Hello World " ;
    }
     ///   <summary>
    
///  带参数
    
///   </summary>
    
///   <param name="s"></param>
    
///   <returns></returns>
    [WebMethod]
     public  string  ReturnString( string  s)
    {
         return  s;
    }
     ///   <summary>
    
///  返回对象
    
///   </summary>
    
///   <returns></returns>
    [WebMethod]
     public  User ReturnDomain()
    {
         return  new  User { Name =  " 王斌 " , Age =  11  };
    }
     ///   <summary>
    
///  返回集合对象
    
///   </summary>
    
///   <returns></returns>
    [WebMethod]
     public  List<User> ReturnList()
    {
         return  new  List<User> {
                                 new  User{Name= " 王斌 " ,Age= 23 },
                                 new  User{Name= " 李攀 " ,Age= 11 }
        };
    }
     ///   <summary>
    
///  返回XML
    
///   </summary>
    
///   <returns></returns>
    [WebMethod]
     public  System.Data.DataTable ReturnXML()
    {
        System.Data.DataTable dt =  new  System.Data.DataTable();
        dt.Columns.Add( " Name " );
        dt.Columns.Add( " Age " typeof ( int ));
        DataRow dr = dt.NewRow();
        dr[ 0 ] =  " wangbin " ;
        dr[ 1 ] =  11 ;
        dt.Rows.Add(dr);
        DataRow dr1 = dt.NewRow();
        dr1[ 0 ] =  " lipan " ;
        dr1[ 1 ] =  22 ;
        dt.Rows.Add(dr1);
        dt.TableName =  " xmltest " ;
         return  dt;
    }

} 


转载:http://blog.csdn.net/thebesttome/article/details/6921407

6
7
分享到:
评论

相关推荐

    jquery调用Webservice的demo(.net)

    本教程将通过一个简单的示例来讲解如何使用jQuery调用.NET环境下的ASMX Web服务。 一、jQuery与Web服务基础 1. jQuery:jQuery简化了JavaScript的API,提供了一致的跨浏览器接口,使得开发者可以更方便地处理DOM...

    Jquery调用WebService示例方法(源代码)

    首先,了解jQuery的核心功能对理解jQuery调用WebService至关重要。jQuery提供了`$.ajax()`函数,它是进行异步数据请求的基础。在这个示例中,`$.ajax()`被用来发起一个HTTP POST或GET请求到WebService的URL,以获取...

    jquery调用webservice总结

    在上述代码中,主要展示了如何使用 jQuery 调用 WebService 进行数据交互。 1. **jQuery AJAX**:jQuery 提供了 `$.ajax()` 函数来执行异步 HTTP (Ajax) 请求。在这个例子中,它被用来与 WebService 进行通信。`$....

    jQuery调用 WebService的实现代码

    以下是一个简单的jQuery调用WebService的例子,假设我们有一个返回当前日期的WebService方法: ```javascript $.ajax({ type: "POST", url: "http://example.com/MyWebService.asmx/GetCurrentDate", data: "{}...

    一个基于jquery调用WebService和WebService输出JSON的源码例子

    这个源码例子“一个基于jquery调用WebService和WebService输出JSON的源码例子”显然涉及到如何利用jQuery与Web服务进行通信,并处理返回的JSON数据。接下来,我们将深入探讨相关知识点。 1. jQuery库的使用: ...

    ASP.NET中jQuery调用WebService处理返回结果的方式

    在ASP.NET中,jQuery调用WebService进行异步通信时,主要通过jQuery的ajax方法实现。处理返回结果的关键在于理解返回数据的类型和对应的处理方式。对于返回字符串、数组或复杂对象,WebMethod可以通过设置不同的返回...

    jQuery调用WebService返回JSON数据及参数设置注意问题

    .NET Framework 3.5的发布解决了WebService调用中json问题,本文将介绍jQuery调用基于.NET Framework 3.5的WebService返回JSON数据,另外还要介绍一下用jQuery调用WebService的参数设置及设置不当所出现的问题,还有...

    jquery跨域调用webservice

    本文将详细解释如何利用jQuery通过JSONP(JSON with Padding)的方式实现跨域调用WebService。 #### 1. JSONP 的基本原理 JSONP 是一种解决跨域请求的有效手段,它通过动态创建`&lt;script&gt;`标签来请求跨域的数据,并...

    jQuery 调用WebService 实例讲解

    1.首先建一个WebService程序 /// /// WebService1 的摘要说明 ...// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。 [System.Web.Script.Services.ScriptService] publ

    Jquery调用Webservice

    **jQuery调用Web服务概述** 在Web开发中,前端与后端的数据交互是必不可少的,jQuery作为一款轻量级的JavaScript库,提供了丰富的API来简化这一过程。本篇将深入探讨如何使用jQuery调用Web服务,特别是Web Service...

    javascript、jQuery调用webservice实现的天气预报

    在这个项目中,jQuery 可能用于优化和简化 AJAX 调用,以及高效地更新 DOM 元素。例如,使用 `$.ajax()` 或 `$.get()` 方法可以方便地发起异步请求,`$(selector).html(data)` 可以快速地将接收到的天气数据插入到...

    Jquery调用webService远程访问出错的解决方法

    Jquery调用webService远程访问出错的解决方法的核心在于对web.config的配置调整。这个过程涉及以下几个关键知识点: 1. Jquery与webService的交互:Jquery是一个非常流行的JavaScript库,可以用来向webService发送...

    jQuery调用WebService的实现代码

    【jQuery调用WebService详解】 在Web开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。而WebService作为一种跨平台、跨语言的数据交换方式,常常用于前后端数据通信。本文将...

    jQuery使用Ajax方法调用WebService.doc

    ### jQuery使用Ajax方法调用WebService知识点详解 #### 一、简介 在Web开发领域中,Ajax(Asynchronous JavaScript and XML)技术被广泛应用于实现页面局部刷新等功能,极大地提升了用户体验。结合jQuery这一流行的...

    jQuery调用Webservice传递json数组的方法|angluo-javascript-159330.pdf

    jQuery调用Webservice传递json数组的方法涉及了前端JavaScript库jQuery与后端Web服务的交互,并且在交互中传递了JSON格式的数据。JSON,即JavaScript Object Notation,是一种轻量级的数据交换格式,易于人阅读和...

    关于jquery ajax 调用带参数的webservice返回XML数据一个小细节.docx

    在使用jQuery AJAX调用带有参数的Web Service并期望返回XML数据时,需要注意一些关键细节以确保数据能够正确传输和解析。以下是对这个问题的详细解释: 首先,jQuery的AJAX方法用于在不刷新整个页面的情况下与...

    jQuery中调用WebService方法小结

    个人感觉有两点是比较方便的:第一,在对WebService做ajax请求的时候,请求的url的... 在使用jQuery调用WebService的方法的时候,只能发送post方式的请求;如果要返回json格式的数据的话,需要将contentType设置为appl

Global site tag (gtag.js) - Google Analytics