jQuery dialog 异步调用ashx,webservice数据

最新推荐文章于 2022-04-15 15:05:13 发布

dduvk21111

最新推荐文章于 2022-04-15 15:05:13 发布

阅读量87

点赞数

文章标签： javascript xhtml c# ViewUI

原文链接：http://www.cnblogs.com/qixuejia/archive/2010/08/02/1790470.html

版权

点击按钮，在弹出的jQuery.dialog中，显示异步返回的数据。

WebService可以写复杂的函数，ashx可以根据传过来的参数调用不同的方法，达到同样的效果。

本文用到了博客园TerryFeng的例子。

Html,JS代码:

代码

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

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
     < title > 无标题页 </ title >
</ head >
< body >

     < script type ="text/javascript" src ="js/jquery-1.4.2.min.js" ></ script >

     < script src ="js/jquery-ui-1.8.2.custom.min.js" type ="text/javascript" ></ script >

     < script type ="text/javascript" >
    $(
         function (){

                    $( ' #dialog ' ).dialog({
                        autoOpen: false ,
                        width: 600 ,
                        buttons: {
                             " Ok " : function () {
                                alert( " OK " );
                                $( this ).dialog( " close " );

                            },
                             " Cancel " : function () {
                                alert( " Cancel " );
                                $( this ).dialog( " close " );

                            }
                        }
                    });


        }

    )

     function show()
    {
    $( ' #dialog ' ).dialog( ' open ' );
    }

      function ajax1()
     {
          $.ajax({
                    type: " get " ,
                    url: " action/test.ashx " ,
                    data:{ " time " :Math.random()},
                    beforeSend: function (XMLHttpRequest)
                        {

                        },
                       success: function (msg)
                        {
                            alert(msg);
                        }
                    });
     }

      function ajax2()
     {
          $.ajax({
                        type: " post " ,
                        contentType: " application/json " ,
                        url: " action/WebService.asmx/HelloWorld " ,
                        data:{},
                        dataType: ' json ' ,
                        success: function (msg)
                        {
                            alert(msg);
                        }
                    });
     }

      function ajax3(setvalue1,setvalue2)
     {
      if (setvalue1.length == 0 || setvalue2.length == 0 )
     {
     alert( ' 请将两个文本框输入完整! ' );
      return false ;
     }
          $.ajax({

                        type: " post " ,
                        contentType: " application/json " ,
                        url: " action/WebService.asmx/HelloA " ,
                        data: " {a:' " + setvalue1 + " ',b:' " + setvalue2 + " '} " ,
                        dataType: ' json ' ,
                        success: function (msg)
                        {
                            alert(msg);
                        }
                    });
     }



      // 返回集合
        function ajax4()
       {
               $.ajax({
                    type: " post " ,
                    contentType: " application/json " ,
                    url: " action/WebService.asmx/GetArray " ,
                    data: " {'i':'10'} " ,
                    success: function (msg) {
                          alert(msg);
                    }
                });
       }

        // 返回复合类型
        function ajax5()
       {
               $.ajax({
                    type: " post " ,
                    contentType: " application/json " ,
                    url: " action/WebService.asmx/GetClass " ,
                    data: " {} " ,
                    success: function (msg) {
                         $(msg).each( function () {
                            alert(msg[ " ID " ] + ' ___ ' + msg[ " Value " ]);
                        });

                    }
                });
       }


        // 返回dataset
        function ajax6()
       {
               $.ajax({
                    type: " post " ,
                    url: " action/WebService.asmx/GetDataSet " ,
                    data: " {} " ,
                    datatype: " xml " ,
                    success: function (msg) {

                         $(msg).find( ' Table1 ' ).each( function () {
                            alert($( this ).find( " ID " ).text() + ' ___ ' + $( this ).find( " Value " ).text());
                        });

                    }
                });
       }


     </ script >

     < form id ="form1" runat ="server" >
     < input id ="dialog_link" type ="button" value ="Show" onclick ="show()" />
     < div id ="dialog" style ="display: none; background-color: Aqua; width: 200px; height: 150px;" >
        WebService参数1 < input type ="text" id ="txtMsg1" />< br />
        WebService参数2 < input type ="text" id ="txtMsg2" />< br />
         < input type ="button" value ="调用Ashx一般处理程序" onclick ="ajax1()" id ="btn1" />
         < input type ="button" value ="调用无参数WebService" onclick ="ajax2()" id ="btn2" />
         < input type ="button" value ="调用有参数WebService" onclick ="ajax3(txtMsg1.value,txtMsg2.value)" id ="btn3" />
         < input type ="button" value ="调用返回集合的WebService" onclick ="ajax4()" id ="btn4" />
         < input type ="button" value ="调用返回复合类型的WebService" onclick ="ajax5()" id ="btn5" />
         < input type ="button" value ="调用返回DataSet的WebService" onclick ="ajax6()" id ="btn6" />
         < div id ="dictionary" ></ div >
        In Dialog!
     </ div >
     </ form >
</ body >
</ html >

Ashx代码:

<% @ WebHandler Language = " C# " Class = " test " %>

using System;
using System.Web;

public class test : IHttpHandler {

     public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = " text/plain " ;
        context.Response.Write( " Hello A " );
        context.Response.End();
    }

     public bool IsReusable {
         get {
             return false ;
        }
    }

}

WebService:

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

/// <summary>
/// WebService 的摘要说明
/// </summary>
[WebService(Namespace = " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]

public class WebService : System.Web.Services.WebService
{

     public WebService()
    {

         // 如果使用设计的组件，请取消注释以下行
         // InitializeComponent();
    }

    [WebMethod]
     public string HelloWorld()
    {
         return " Hello C " ;
    }

    [WebMethod]
     public string HelloA( string a, string b)
    {
         return " Hello__ " + a + " __ " + b;
    }

    [WebMethod]
     public List < int > GetArray( int i)
    {
        List < int > list = new List < int > ();

         while (i >= 0 )
        {
            list.Add(i -- );
        }

         return list;
    }

    [WebMethod]
     public Class1 GetClass()
    {
        Class1 cl = new Class1();
        cl.ID = " qixuejia " ;
        cl.Value = " qixuejia.cnblogs.com " ;
         return cl;

    }

    [WebMethod]
     public DataSet GetDataSet()
    {
        DataSet ds = new DataSet();
        DataTable dt = new DataTable();
        dt.Columns.Add( " ID " , Type.GetType( " System.String " ));
        dt.Columns.Add( " Value " , Type.GetType( " System.String " ));
        DataRow dr = dt.NewRow();
        dr[ " ID " ] = " 1 " ;
        dr[ " Value " ] = " qixuejia.cnblogs.com " ;
        dt.Rows.Add(dr);
        dr = dt.NewRow();
        dr[ " ID " ] = " 2 " ;
        dr[ " Value " ] = " qixuejia " ;
        dt.Rows.Add(dr);
        ds.Tables.Add(dt);
         return ds;
    }

}
public class Class1
{

     private string   _ID;
     private string _Value;

     public string ID
    {
         get { return _ID; }
         set { _ID = value; }
    }
     public string Value
    {
         get { return _Value; }
         set { _Value = value; }
    }


}

转载于:https://www.cnblogs.com/qixuejia/archive/2010/08/02/1790470.html