jQuery调用ASP.NET的WebService

时间  2019-11-30
标签 jquery 调用 asp.net asp webservice 栏目 JQuery 繁體版
原文   原文链接

常常须要使用客户端脚本调用net的WebService，比较经常使用的是在ScriptManager脚本管理器的环境下使用回调调用WebService的方法，但是这些必须在aspx的页面中进行，不免有些限制。ajax

   jQuery库是咱们比较经常使用的JavaScript库，入门简单，功能强大，对Ajax的支持比较友好。使用jQuery调用net的WebService也是常常遇到的。现将常见调用类型总结以下：json

 

   一、环境app

        jQuery 1.3.2ide

        .net framework 2.0函数

        Asp.net ajax 1.0测试

   二、后台WebService的代码动画

   

[c-sharp] view plain copy
  1. using System;  
  2. using System.Collections;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Services;  
  6. using System.Web.Services.Protocols;  
  7. using System.Xml.Linq;  
  8. using System.Text;  
  9. using System.Collections.Generic;  
  10. using System.Data;  
  11.   
  12. /// <summary>  
  13. ///WebService 的摘要说明  
  14. /// </summary>  
  15. [WebService(Namespace = "http://tempuri.org/")]  
  16. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
  17. //若要容许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。   
  18. [System.Web.Script.Services.ScriptService]  
  19. public class WebService : System.Web.Services.WebService  
  20. {  
  21.   
  22.     public WebService()  
  23.     {  
  24.   
  25.         //若是使用设计的组件，请取消注释如下行   
  26.         //InitializeComponent();   
  27.     }  
  28.     [WebMethod]  
  29.     public string HelloWorld()  
  30.     {  
  31.         return "Hello World";  
  32.     }  
  33.     [WebMethod]  
  34.     public string HelloWorld(string userName)  
  35.     {  
  36.         StringBuilder sb = new StringBuilder();  
  37.         for (int i = 0; i < 100; i++)  
  38.         {  
  39.             sb.AppendLine("<del>Hello World "+i+"<br /></del>");  
  40.         }  
  41.   
  42.         return sb.ToString();  
  43.     }  
  44.     [WebMethod]  
  45.     public StudentInfo GetClass()  
  46.     {  
  47.         StudentInfo s = new StudentInfo();  
  48.         s.StuName = "Accp 4.0";  
  49.         s.Id = 1;  
  50.         return s;  
  51.     }  
  52.     [WebMethod]  
  53.     public List<StudentInfo> GetList()  
  54.     {  
  55.         return (new StudentInfo()).GetList();  
  56.     }  
  57.     [WebMethod]  
  58.     public DataSet GetDataSet()  
  59.     {  
  60.         return (new StudentInfo()).GetDataSet();  
  61.     }  
  62. }  

 

 

   WebService中使用的实体类ui

   

[c-sharp] view plain copy
  1. using System;  
  2. using System.Data;  
  3. using System.Configuration;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Security;  
  7. using System.Web.UI;  
  8. using System.Web.UI.HtmlControls;  
  9. using System.Web.UI.WebControls;  
  10. using System.Web.UI.WebControls.WebParts;  
  11. using System.Xml.Linq;  
  12. using System.Collections.Generic;  
  13.   
  14. /// <summary>  
  15. ///StudentInfo 的摘要说明  
  16. /// </summary>  
  17. public class StudentInfo  
  18. {  
  19.     public StudentInfo()  
  20.     {  
  21.     }  
  22.     private string m_stuName;  
  23.   
  24.     public string StuName  
  25.     {  
  26.         get { return m_stuName; }  
  27.         set { m_stuName = value; }  
  28.     }  
  29.     private int m_id;  
  30.   
  31.     public int Id  
  32.     {  
  33.         get { return m_id; }  
  34.         set { m_id = value; }  
  35.     }  
  36.     public DataSet GetDataSet()  
  37.     {  
  38.         DataSet ds = new DataSet();  
  39.         DataTable dt = new DataTable();  
  40.         dt.Columns.Add("Name");  
  41.         dt.Columns.Add("Id");  
  42.   
  43.         for (int i = 0; i < 55; i++)  
  44.         {  
  45.             DataRow row = dt.NewRow();  
  46.             row["Name"] = "Hello World" + i;  
  47.             row["Id"] = i;  
  48.   
  49.             dt.Rows.Add(row);  
  50.         }  
  51.         ds.Tables.Add(dt);  
  52.   
  53.         return ds;  
  54.     }  
  55.     public List<StudentInfo> GetList()  
  56.     {  
  57.         List<StudentInfo> list = new List<StudentInfo>();  
  58.         for (int i = 0; i < 55; i++)  
  59.         {  
  60.             StudentInfo s = new StudentInfo();  
  61.             s.StuName = "Hello World" + i;  
  62.             s.Id = i;  
  63.   
  64.             list.Add(s);  
  65.         }  
  66.         return list;  
  67.     }  
  68. }  

 

 

   三、前台显示页面调用this

        这里前台页面使用htm页面来进行测试。url

       一、无参数调用

         $(document).ready(function() {
            $('#Button1').click(function() {
                $.ajax({
                    type: "POST",   //访问WebService使用Post方式请求
                    contentType: "application/json", //WebService 会返回Json类型
                    url: "../WebService.asmx/HelloWorld", //调用WebService的地址和方法名称组合---WsURL/方法名
                    data: "{}",         //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到      
                    dataType: 'json',
                    success: function(result) {     //回调函数，result，返回值

                           alert(result.d);
                     }
                });

              });

          });

 

      二、带参数的调用

        

         $(document).ready(function() {
            $('#Button1').click(function() {
                $.ajax({
                    type: "POST",   //访问WebService使用Post方式请求
                    contentType: "application/json", //WebService 会返回Json类型
                    url: "../WebService.asmx/HelloWorld", //调用WebService的地址和方法名称组合---WsURL/方法名
                    data: "{userName:'alpha'}", 
                    dataType: 'json',
                    success: function(result) {     //回调函数，result，返回值

                           alert(result.d);
                    }
                });

              });

          });

 

      三、返回复合类型        

         $(document).ready(function() {
            $('#Button1').click(function() {
                $.ajax({
                    type: "POST",   //访问WebService使用Post方式请求
                    contentType: "application/json", //WebService 会返回Json类型
                    url: "../WebService.asmx/GetClass", //调用WebService的地址和方法名称组合---WsURL/方法名
                    data: "{}",
                    dataType: 'json',
                    success: function(result) {     //回调函数，result，返回值

                           alert(result.d["StuName"]);
                    }
                });

              });

          });

 

      四、返回泛型集合        

         $(document).ready(function() {
            $('#Button1').click(function() {
                $.ajax({
                    type: "POST",   //访问WebService使用Post方式请求
                    contentType: "application/json", //WebService 会返回Json类型
                    url: "../WebService.asmx/GetList", //调用WebService的地址和方法名称组合---WsURL/方法名
                    data: "{}",
                    dataType: 'json',
                    success: function(result) {     //回调函数，result，返回值

                           $(result.d).each(function(){
                                $("#result").append(this["Id"]+" "+this["StuName"]+"<br />");
                            });                   

                     }
                 });

              });

          });

 

      五、返回DataSet(xml格式)

         $(document).ready(function() {
            $('#Button1').click(function() {
                $.ajax({
                    type: "POST",   //访问WebService使用Post方式请求
                    url: "../WebService.asmx/GetDataSet", //调用WebService的地址和方法名称组合---WsURL/方法名
                    data: "{}",
                    dataType: "xml",
                    success: function(result) {     //回调函数，result，返回值

                            $(result).find("Table1").each(function() {
                                $('#result').append($(this).find("Id").text() + " " + $(this).find("Name").text()+"<br />");
                            });               

                     }
                 });

              });

          });

     

      显示动画效果

      $(document).ready(function(){

            $('#loading').ajaxStart(function() {
                $(this).show();
            }).ajaxStop(function() {
                $(this).hide();
            });

      });

  

 

      HTML代码部分

     <input id="Button1" type="button" value="Invoke" />     <div id="result">        <img id="loading" style="display: none;" alt="loading" src="../images/loading.gif" />     </div>

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程