$.ajax入门应用二

来源：互联网发布：linux自动化运维脚本编辑：程序博客网时间：2024/04/29 06:21

前台

<!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>
    <title>无标题页</title>
    <style type="text/css">
        .show{ display:block;}
        .hide{ display:none;}
    </style>
    <script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>
    <script type="text/javascript">
        //这个方法把ajax方法封装一下，方便调用。
        function myajax(){   
            $.ajax({
                type:'get',
                url:'ajax.aspx',
                data:'id=1name=tree',
                dataType:'html',
                beforeSend:beforecall,
                success:callback
            });
        }
        //调用前方法
        function beforecall(){
            $('#wait').addClass("show").append('调出中...');
            //alert('');//测试是否调用
        }
        //回调函数
        function callback(data){
            $('#response').append(data);
            $('#wait').css("display","none");
        }
        //onload()事件
        $(function(){
            $('#confirm').click(myajax);
        })
    </script>
</head>
<body>
    <div id="confirm">点击</div>
    <div id="response">接收后台数据</div>
    <div id="wait" class="hide">hello</div>
</body>
</html>

后台

    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write("hello"+Request["name"]);
        Response.End();
    }