ajax异步提交

需引入jquery脚本

1、提交端脚本

var eid = ‘<%= str_eid%>‘;
        var date = ‘<%= str_date%>‘;
        var year = ‘<%= str_year%>‘;
        var quarter = ‘<%= str_quarter%>‘;
        var ssid = ‘<%= str_ssid%>‘;

        //队列提交开始
        var ajaxes = [];
        var xmlhttp = function () {
            var xhr = false;
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e1) {
                    xhr = false;
                }
            }
            if (!xhr && typeof XMLHttpRequest != ‘undefined‘) {
                xhr = new XMLHttpRequest();
            }
            return xhr;
        }

        var xhr = new xmlhttp(); //获得XMLHttpRequest实例对象xhr
        //executeAjax是主要的执行Ajax的函数
        var executeAjax = function () {
            //            //如果队列为空,则退出执行
            if (!ajaxes.length)
                return;

            //setTimeout("waitTime()", 2000);
            var options = ajaxes[0];
            if (xhr) {
                xhr.open(options.method, options.url, true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
                        options.callback(xhr.responseText, options.deptid, options.scid);
                        //删除队列中的第一个请求
                        ajaxes.shift();
                        //如果队列中还有请求,就接着递归执行executeAjax函数,直到队列为空
                        if (ajaxes.length > 0) {
                            executeAjax();
                        }
                    }
                }
                if (xhr.method === "post") {
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                }
                xhr.send(options.data || null);
            }
        }
        //用于添加队列的函数
        var addAjax = function (options) {
            ajaxes.push(options);
        }

        //具体的操作
        var submitOneQuestion = function (deptid, scid, levelid, score) {
            var url = String.format("mz_exam2Operation.ashx?eid={0}&&date={1}&&year={2}&&quarter={3}&&ssid={4}&&deptid={5}&&scid={6}&&levelid={7}&&score={8}", eid, date, year, quarter, ssid, deptid, scid, levelid, score);
            addAjax({ method: "GET", url: url, deptid: deptid, scid: scid, callback: applyDom });
            //开始执行队列
            executeAjax();
        }

        //返回状态
        var applyDom = function (reponseText, deptid, scid) {
            //reloadNum();
            if (reponseText == "success") {
                var cell_rbtn1 = $(‘#‘ + ‘cell_‘ + deptid + ‘_‘ + scid + ‘_rbtn1‘);
                var cell_rbtn2 = $(‘#‘ + ‘cell_‘ + deptid + ‘_‘ + scid + ‘_rbtn2‘);
                var cell_rbtn3 = $(‘#‘ + ‘cell_‘ + deptid + ‘_‘ + scid + ‘_rbtn3‘);
                var cell_score = $(‘[id^=cell_‘ + deptid + ‘_‘ + scid + ‘_score]‘);

                cell_rbtn1.css(‘color‘, ‘#6bd553‘);
                cell_rbtn2.css(‘color‘, ‘#6bd553‘);
                cell_rbtn3.css(‘color‘, ‘#6bd553‘);
                //cell_score.css(‘color‘, ‘#6bd553‘);

                cell_rbtn1.css(‘fontWeight‘, ‘bold‘);
                cell_rbtn2.css(‘fontWeight‘, ‘bold‘);
                cell_rbtn3.css(‘fontWeight‘, ‘bold‘);
                //cell_score.css(‘fontWeight‘, ‘bold‘);

                cell_score.attr(‘isRequest‘, ‘1‘);//是否有返回值,0为未返回,1为返回。
            }
        }

        //队列提交结束
        function RadioChanged(cname, classno) {
            $("#" + cname).attr("level", classno);

            var deptid = cname.split(‘_‘)[1];
            var scid = cname.split(‘_‘)[2];
            var levelid = classno;
            var score = "0";

            //不同类型有不同分数段
            if (scid >= 1 && scid <= 4) {
                switch (classno) {
                    case "1":
                        $("#" + cname).val("15"); score = 15; break;
                    case "2":
                        $("#" + cname).val("10"); score = 10; break;
                    case "3":
                        $("#" + cname).val("5"); score = 5; break;
                    default:
                        $("#" + cname).val("15"); score = 15; break;
                }
            }
            else
                if (scid >= 5 && scid <= 8) {
                    switch (classno) {
                        case "1":
                            $("#" + cname).val("10"); score = 10; break;
                        case "2":
                            $("#" + cname).val("7"); score = 7; break;
                        case "3":
                            $("#" + cname).val("3"); score = 3; break;
                        default:
                            $("#" + cname).val("10"); score = 10; break;
                    }
                }

            //增加随时提交。
            submitOneQuestion(deptid, scid, levelid, score);
        }

2、接收端代码

public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        String str_eid = context.Request.QueryString["eid"].ToString();
        String str_date = context.Request.QueryString["date"].ToString();
        String str_year = context.Request.QueryString["year"].ToString();
        String str_quarter = context.Request.QueryString["quarter"].ToString();
        String str_ssid = context.Request.QueryString["ssid"].ToString();

        String str_deptid = context.Request.QueryString["deptid"].ToString();
        String str_scid = context.Request.QueryString["scid"].ToString();
        String str_levelid = context.Request.QueryString["levelid"].ToString();
        String str_score = context.Request.QueryString["score"].ToString();

        if (SubmitOneQuestion(str_eid, str_date, str_year, str_quarter, str_ssid, str_deptid, str_scid, str_levelid, str_score))
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("success");
        }
        else
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("failed");
        }
        context.Response.Buffer = true;
        context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
        context.Response.Cache.SetExpires(DateTime.Now.AddDays(-1));
        context.Response.Expires = 0;
        context.Response.CacheControl = "no-cache";
        context.Response.Cache.SetNoStore();

    }
时间: 2024-07-29 09:10:14

ajax异步提交的相关文章

jQuery选取所有复选框被选中的值并用Ajax异步提交数据

昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: 1 <body> 2 <div> 3 <input type=&quo

AJAX异步提交,浏览器总跳出下载界面

问题: 我在写一个网页的“用户登录”部分时,要将用户名和密码传到后端验证,想在前端用了AJAX异步提交功能,将 用户名密码传到后端,然后后端返回验证结果.但AJAX写好后每次刷新网页都会跳出下载窗口,起初以为是 AJAX传输的数据格式出了问题,导致浏览器误以为后台传来的数据是下载内容(这么猜测的),于是 换了xml,txt,jaon 等格式试了个遍,最后还是没解决.后来翻到这篇帖子,才明白: http://www.jb51.net/article/32540.htm,我们先看看我的代码: 下面是

ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码

首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般注册都需要用户填一个验证码信息(防止机器恶意注册),并且这个验证码会提交到后台去进行比对,若是错了则不会检查其他提交信息而直接返回浏览器端提示验证码错误.若是简单地用form表单直接将数据提交到指定的url,当验证码填写错误的信息返回浏览器端的时候,不可避免整个页面都会重新刷新一次,这是用户所不想要

Ajax异步提交登录(2)--登录使用

http://cjp1989.iteye.com/blog/1740964 1.Ajax的原理: Ajax的原理就是:通过javascript的方式,将前台数据通过xmlhttp对象传递到后台,后台在接收到请求后,将需要的结果,再传回到前台,这样就可以实现不需要页面的转发,数据实现来回传递,从而实现页面无刷新. 基于这个原理,我想到使用Ajax传输登录的信息,包括错误信息,功能很强大,保证绝对的用户友好型. 2.使用Ajax异步提交登录可以实现功能:可以提示用户名错误,可以提示用户名正确但是密码

AJAX异步提交(前端)

/*AJAX异步提交*/ /*1.声明一个AJAX全局变量*/ var ajaxRequest; function checkAjAx() { /*2.创建XMLHttpRequest*/ ajaxRequest=new XMLHttpRequest(); /*3.配置请求对象*/ var url="user.do?uname="+$("uname").value()+"times="+new Date().getMilliseconds();

form表单submit提交内容,跟ajax异步提交form表单的区别,

因为开发一个小细节,本来是上传文件,填写文件名进行ajax提交,但是没有获取到文件的绝对地址, 所以使用了form表单提交文件,然后又觉得form表单+ajax提交联系起来比较好,不用改动太多代码. 区别: Form表单提交:一般都会进行页面跳转: Ajax异步提交:可以不进行页面跳转: Form表单提交 <body> <div id="forms”> <form id="form1" action="/users/login"

extJs常用的四种Ajax异步提交

/** * 第一种Ajax提交方式 * 这种方式需要直接使用ext Ajax方法进行提交 * 使用这种方式,需要将待传递的参数进行封装 * @return entitySearch.firstname:document.all.firstname.value, */function saveUser_ajaxSubmit1() { Ext.Ajax.request( {  url : 'user_save.action',  method : 'post',  params : {   user

Ajax异步提交笔记

1,Ajax AJAX = 异步 JavaScript 和 XML. Asynchronous JavaScript and XML XMLHttpRequest 对象 (异步的与服务器交换数据) JavaScript/DOM (信息显示/交互) CSS (给数据定义样式) XML (作为转换数据的格式) 2,XMLHttpRequest 创建XMLHttpRequest的语法 IE5和IE6: xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"

MVC之AJAX异步提交表单

第一种用法: 在MVC中,依然可以使用ajax校验,跟在WebForm中的使用时一样的,唯一的区别就是将以前的URL路劲改为访问控制器下的行为 前台 <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.8

extJs常用的四种Ajax异步提交 - haiq - 博客园

/** * 第一种Ajax提交方式 * 这种方式需要直接使用ext Ajax方法进行提交 * 使用这种方式,需要将待传递的参数进行封装 * @return */ function saveUser_ajaxSubmit1() { Ext.Ajax.request( { url : 'user_save.action', method : 'post', params : { userName : document.getElementById('userName').value, passwor