页面无刷新提交数据

ajax无刷新提交数据不是新技术了，只是最近才用到，做了个小程序与新手分享，也备自己以后查阅。

 

Default.aspx页面代码： 

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Default.aspx.cs "  Inherits = " _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 >

     < script  type ="text/javascript"  src ="http://www.w3school.com.cn//jquery/jquery.js" ></ script >

     < script  type ="text/javascript" >
$(document).ready( function (){
   $( " #btnstop " ).click( function () {
        $( " #btnstop " ).attr( ' disabled ' ,  true );
        $( " #btnstop " ).val( " 发送中... " );
         var  numbers  = $( " #listbox " ).html();  // 号码

         if  (numbers  ==   "" ) {
            alert( " 没有选择号码！ " );
            $( " #btnstop " ).attr( ' disabled ' ,  false );
            $( " #btnstop " ).val( " 停止 " );
             return   false ;
        }
$.ajax({
                url:  ' Submits.ashx ' ,
                type:  ' post ' ,
                timeout:  ' 1500000 ' ,
                data:  " &n= "   +  numbers ,
                error:  function () {
                    alert( " 数据传输错误！请重新提交 " );
                    $( " #btnstop " ).attr( ' disabled ' ,  false );
                    $( " #btnstop " ).val( " 停止 " );
                },
                success:  function (data) {
                     if  (data  !=   null ) {
                         if  (data  ==   " error " ) {
                            cc  =   " 系统错误！ " ;
                        }
                        
                         else  {
                            cc  =  data;
                        }
                        $( " #btnstop " ).attr( ' disabled ' ,  false );
                        $( " #btnstop " ).val( " 停止 " );
                        $( " #result " ).html( " 报告: " + cc);
                        setTimeout( function (){document.all.result.innerHTML  += ' <p/>间隔2秒 ' }, 2000 );
                        setTimeout( function (){document.all.result.innerHTML  += ' <p/>间隔4秒 ' }, 4000 );
                    }
                }
            });
        
    });
});
     </ script >

</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
         < input  id ="btnstart"  type ="button"  value ="开始"  onclick ="javascript:testtimeout()"   />< br  />
         < br  />
         < input  id ="btnstop"  type ="button"  value ="停止"  onclick ="javascript:clearTimeout(timer)"   /></ div >
     < div  id ="listbox" >
     </ div >
     < div  id ="result" >
     </ div >

     < script  language ="javascript"  type ="text/javascript" >
var    i = 0 ;
var    timer;
function    testtimeout()   {
timer = setTimeout(  " testtimeout(); " , 110 );

i ++ ;
document.all.listbox.innerHTML = Math.floor(Math.random() * 1000 + 1 );  // 1-1000;
}

     </ script >

     </ form >
</ body >
</ html >

 

Submits.ashx后台代码：

 1  <% @ WebHandler Language = " C# "  Class = " Submits "   %>
 2 
 3  using  System;
 4  using  System.Web;
 5 
 6  public   class  Submits : IHttpHandler {
 7      
 8       public   void  ProcessRequest (HttpContext context) {
 9 
10           string  numbers  =  HttpUtility.UrlDecode(context.Request.Form[ " n " ]); // 号码
11 
12          context.Response.ContentType  =   " text/plain " ;
13          context.Response.Write( " 号码 " +  numbers  +   " 已经提交至服务器. " );
14           // context.Response.Write("error");
15          context.Response.End();
16      }
17   
18       public   bool  IsReusable {
19           get  {
20               return   false ;
21          }
22      }
23 
24  }

 

 

转载于:https://www.cnblogs.com/habin/archive/2011/06/22/2086691.html