基於Ajax技術實現考試倒計時並自動提交試卷

2022-09-21 09:36:13 字數 2122 閱讀 3224

1.概述

在開發網路考試系統時,考試計時並自動提交試卷是必不可少的功能。由於在答卷過程中,試卷不能重新整理,所以需要使用ajax實現無重新整理操作。執行本例項,訪問準備考試頁面index.jsp,在該頁面中,單擊「開始考試」按鈕,將開啟新視窗顯示開始考試的頁面,如圖10.1所示,頁面會自動計時,當考試時間結束時,將自動提價試卷。

2.技術要點

主要是利用ajax非同步提交技術和servlet技術實現的。顯示在考試頁面中的計時時間是在servlet中設定的,需要通過ajax的非同步提交不斷的請求servlet,從而獲得伺服器返回的最新的計時時間的資料。為了便於維護和**的重用,可以將ajax的請求方法封裝到乙個js檔案中,該方法可以作為乙個公共方法,在程式中使用時可以直接呼叫。

3.具體實現**

在js檔案中構建xmlhttprequest物件以及請求方法,如下**所示:

/*** 構建xmlhttprequest物件並請求伺服器

* @param reqtype:請求型別(get或post)

* @param url:伺服器位址

* @param async:是否非同步請求

* @param resfun:響應的**函式

* @param parameter :請求引數

* @return :xmlhttprequest物件

}(1)新建index.jsp頁,該頁面是使用者訪問的初始頁。在頁面中主要包含乙個「開始考試」按鈕,該按鈕的onclick事件將呼叫開啟考試視窗的j**ascript函式,關鍵**如下:

function showwindow()

(2)新建名為startexam的servlet實現類,該類用建立考試的開始時間和剩餘時間。在該類中,建立乙個全域性變數examtime,用於記錄考試時間,該變數的值是在web.xml中設定的,關鍵**如下:

startexam

com.lh.servlet.startexam

e程式設計客棧xamtime

20(3)在startexam類中,編寫用於將頁面**到開始考試頁面的方法startexam()。關鍵**如下:

(4)新建showstarttime.jsp頁,用於輸出計時開始時間。關鍵**如下:

$(5)新建showww.cppcns.comwremaintime.jsp頁,用於輸出計時剩餘時間。關鍵**如下:

$(6)新建開始考試頁面startexam.jsp頁,在該頁中通過呼叫ajax請求方法請求startexam類,獲得考試的開始時間和剩餘時間。關鍵**如下:

var request1= false;

var request2 = false;

//請求servlet獲得開始時間

function showstarttime()

//**函式

function callbackfunc()}}

//請求servlet獲得剩餘時間

function showremaintime()

//**函式

function callbackfunc_r()}}

}(7)為了實現頁面載入後自動計時,需要在開始考試頁面的

標籤中通過onload事件應用window.seybhqcqftinterval()方法呼叫showstarttime()函式和showremailtime()函式,關鍵**如下:

以上所述是小編給大家介紹的基於ajax技術實現考試倒計時並自動提交試卷 的相關知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對我們**的支援!

本文標題: 基於ajax技術實現考試倒計時並自動提交試卷

本文位址:

JQuery實現倒計時

以下是要實現的效果 當條件滿足時,出彈窗,3秒後自動跳轉指定頁面 姓名 type text name name cwid type text name cwid class submit nclick submit 註冊 class tishi hide 恭喜您,身份驗證成功倒計時 id time ...

實現倒計時功能

一 php time1 strtotime date y m d h i s time2 strtotime 2017 01 01 00 00 00 time3 strtotime 2017 05 01 sub1 ceil time2 time1 3600 60 60 sub2 ceil time3...

js實現倒計時

實現要點 1.思路 搶購時間 現在時間,用 gettime 得到時間 單位為毫秒 再轉換為標準時間 2.用 setinterval 方法來實現倒計時,當時間為0時,清除計時器 3.設定按鈕的屬性為禁用,時間到了清除 disabled 屬性 4.將時間通過 innerhtml 屬性顯示在p標籤上 5....