页面无刷新提交数据

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 }

posted @ 2011-06-22 11:03 habin 阅读(1200) 评论(0) 编辑收藏举报

刷新页面返回顶部

页面无刷新提交数据

公告