使用jQuery简化ajax操作

代码

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312"%>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (Request.Form["name"] != null)
            {
                System.Threading.Thread.Sleep(3000);
                Response.Write(Request.Form["name"] + "：你好，异步通信数据传输成功！");
                Response.End();
            }
        }
    }
</script>
<html>
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    body{font-size:12px; line-height:30px;}
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
       //提交数据
        function ajax(){
            $.post(
            "index.aspx",
            {
                name:"尊敬的朋友"
             },
            function(data){
                $("#divData").text(data);
            }
            )
        }

        $(document).ready(function(){
        //开始请求
        $("#jindu").ajaxStart(function(){
               $("#divData").html(null);
               $(this).show();
             });
        //请求结束时
        $("#jindu").ajaxStop(function(){
               $(this).hide();
             });
       });
    </script>
</head>
<body>
        <input id="Button1" type="button" value="异步通信测试" onclick="ajax();" />
        <div id="divData"></div>
        <div id="jindu" style="display:none;">数据正在提交，请稍后…</div>
</body>
</html>

posted on 2009-11-30 22:12 暮光青年阅读(260) 评论(0) 收藏举报

刷新页面返回顶部

暮光青年学习笔记

使用jQuery简化ajax操作

导航

公告