jQuery dialog 异步调用ashx,webservice数据

点击按钮，在弹出的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; }
    }
   

}