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