使用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 >

 

转载于:https://www.cnblogs.com/huanghai/archive/2009/11/30/1614084.html