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; }
    }


}