页面无刷新提交数据
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 }
