基于WEB的上機考核系統中JQuery和Ajax技術的應用

丁華，陳輝

（陜西交通職業技術學院 陜西 西安 710018）

基于WEB的上機考核系統中JQuery和Ajax技術的應用

丁華，陳輝

（陜西交通職業技術學院 陜西 西安 710018）

基于提高上機考核系統交互效率和人性化設計的目的，在Web上機考核系統設計中，采用MVC4框架的ASP.NET技術開發和基于SQLServer2012的數據庫系統架構，并在軟件設計中使用了JQuery和Ajax技術，提高了系統中各類數據的交互顯示效果，并且在考試發布、提交、批改的各個功能設計中實現了較好的用戶體驗。經過系統測試和應用，可以簡化教師上機考核工作量、提高學生考核和提交的效率，實現了預期的效果。

上機考核，JQuery，Ajax，WEB應用

學生上機考核系統是一個基于B/S結構的WEB應用程序，主要功能是對學生上機考核中的作業發布管理、作業提交管理、作業考評管理、考勤管理、在線考試管理等功能。

該應用開發是為了在實訓機房中系統地管理上機考核的整個過程，改變以往教師每次布置作業后學生完成練習后提交作業，這樣的過程相互不關聯，沒有系統管理的過程，不能很好的評估一門課程在整個學期中實訓的情況（包括學生實訓考勤、教師的布置的上機任務和學生的上機提交作業等等）。

整個系統采用基于MVC4框架的ASP.NET進行開發，開發環境采用 Visual Studio 2012，后臺數據庫使用 SQL Sever2012。

在整個系統開發設計中，采用了大量的JQuery技術進行WEB前端、AJAX和JSon數據交換技術，以前開發系統采用的WebForm技術相比較，開發效率有了較大的提升，系統界面更加美觀，運行速度有有所提升。

1 JQuery和Ajax技術概述

JQuery技術是一個非常優秀的JavaScript框架，其名稱就是JavaScript+Query，也就是為了更好的進行JavaScript查詢而設計的應用框架，由于使用簡單和兼容性好，因此JQuery技術在Web開發中應用非常廣泛[1-3]。

EasyUI技術是基于 JQuery的前端界面設計工具包，EasyUI提供了豐富的設計插件，可以實現WEB頁面中的各種元素，不僅包括網頁布局，而且還包括各類顯示元件，例如各類選項卡、樹形菜單、數據表格等等。JQuery EasyUI是一組基于JQuery的UI插件集合體，而JQuery EasyUI的目標就是幫助WEB開發者更輕松的打造出功能豐富并且美觀的UI界面[5-6]。

Ajax（Asynchronous Javascript And XML）技術是異步更新技術[7]，其技術基礎同樣是源于JavaScript技術，Ajax是對傳統Web頁面內容更新的革命性變化，使用Ajax技術后，頁面的內容更新可以實現局部更新，不需要整個頁面的刷新就可以實現頁面內的部分內容更新，典型的應用就是谷歌地圖和百度地圖，在對地圖的放大過程中，不斷細化地圖的細節的同時頁面并不會刷新，而是在與服務器進行數據交換的過程總進行局部更新，這種技術可以極大的改善用戶體驗[8]。

2 EasyUI界面和菜單設計

在主界面設計中，采用了基于JQuery框架的EasyUI界面設計技術，主界面中使用了EasyUI的layout、accordion、tabs插件進行設計[9]。

1）EasyUI頁面設計

主界面采用EasyUI的layout布局面板設計[10]，將整個區域分為4個區域，分別是north，west，south，center，如圖1所示。

圖1 主界面布局

2）菜單設計

在West區域的菜單欄內采用了EasyUI中的 accordion可伸縮面板設計，在accordion面板中將教師的管理功能分為5大類，共11項功能，這些菜單將設計放置在主界面布局中的West位置，如圖2所示。

圖2 管理菜單結構

3）菜單代碼設計

系統設計采用基于MVC的Asp.NET開發架構，使用模型-視圖-控制器的設計模式，各個管理類別的每個菜單項都是一個超鏈接，分別指向相應功能的控制器，獲取控制器返回的視圖，將視圖顯示在中間內容區域。例如，學生管理中的導入學生信息超鏈接代碼如下：

在圖1布局中的center區域，是一個選項卡容器，可以將多個頁面以選項卡的形式顯示，在layout布局面板中提供了對選項卡操作的方法。每個選項卡以div標簽設計，頁面中使用JQuery腳本添加了該超鏈接的點擊事件代碼，綁定了處理函數，當用戶點擊超鏈接后會執行關聯bindLinkClickEvent函數，函數代碼如下：

函數執行流程如圖3所示。

圖3 主界面選項卡的創建流程

4）界面布局設計

完成主界面設計后，系統菜單才界面的West區域 （左側），系統的主要顯示區域是Center區域（中央），在中央區域中采用選項卡設計，用戶點擊菜單就會下中央區域顯示相應的選項卡，如圖4所示。

3 Ajax和Json技術的應用

在系統設計中大量采用了Ajax的異步提交技術改進用戶的操作體驗，在系統設計中主要采用了JQuery中提供的異步提交的方法ajaxSubmit[11]，以教師批改作業為例說明設計過程，如圖5是作業批改頁面。

當用戶選擇學期、課程、班級等3個列表框后，頁面會觸發異步提交，在提交函數中，采用Ajax將用戶選擇的列表項id以異步的機制提交Teacher控制器相應的Action，在Action中根據選項id查詢課程和班級信息的對象集合，然后封裝為JSON數據回傳到提交頁面，異步提交函數如下。

圖4 主界面

圖5 作業批改頁面

在回調函數中，會獲取數據查詢的數據封裝成的JSON數據集合重構其他的列表框內容，實現頁面局部刷新，當用戶選擇指定的學期、課程、班級、作業后，點擊“顯示提交作業”按鈕，系統會再次進行異步提交，返回學生的作業信息，這些信息還是以JSON數據封裝。

JSON（JavaScript Object Notation）是一種數據格式[12-13]，主要是便于JavaScript進行解析，其本質就是JavaScript中的鍵值對集合，采用逗號、括號等標記將數據分割保存，使用JSON數據的目的是為了實現服務器回傳的數據被客戶端JavaScript腳本快速解析， 在.NET框架中提供了JavaScriptSerializer類進行JSON對象的快速序列化和反序列化的操作[14-15]。下面代碼就是JSON對象的序列化操作。

根據指定作業查詢的學生作業對象集合，經過JSON對象序列化操作，創建成為JSON字符串，返回客戶端，由Ajax的回調函數接收，對JSON字符串進行解析，動態創建班級學生作業表格。

根據班級id獲取的班級學生對象集合經過JSON對象序列化后，被序列化為字符串，例如對動漫1307班級查詢的結果（部分）JSON的字符串顯示如下，表示一位學生的作業信息，對應圖5中作業表中的第一行作業信息。

"[{"StudentName":" 張 云 浩 "，"StudentNo":" 030631200629"，"Score":0，"CourseName":null，"orkTitle": null，"id":4399，"studentid":1146，"studentWorkMemo":".1"，"studentWorkFile":"/UploadFile/StudentWork/2015/9/28/ work.rar"，"workid":3053，"workUploadTime":"\/Date（1443427342000）\/"}….，

從JSON字符串可以分析出，該字符串以”[”開始，”]”結束，字符串中的每個對象用”{}”包圍，在每個對象中以”String屬性名”:”value屬性值”的鍵值對格式保存數據。JSON字符串格式如圖6所示[9]。

圖6 JSON數據格式

與XML等其他的數據封裝格式相比較，JSON字符串格式可讀性并不好，但是這種格式最大的優點就是JSON字符串可以被JavaScript以數組的方式快速讀入解析，而無需借助任何其他工具，非常便利[10]。

2）班級學生作業表格動態創建設計

客戶端的Ajax回調函數獲取服務器返回的JSON字符串后，首先需要使用JavaScript的eval函數將字符串解析為JSON數據格式，然后以數組形式進行遍歷訪問。下面就是回調函數解析JSON字符串后編輯并動態創建表格的關鍵代碼，動態創建的表格如圖5所示的表格。

$（"#workTab"）.append（""

+""

+""

+""

+""

+""+""

+""）；

在動態表格創建完成后，從圖5可以看出，每行的表格中還有“查看作業”的超級鏈接，需要再次進行異步提交的函數綁定，查看作業的超級鏈接對應的css樣式的綁定的偽類為workdetail，使用JQuery可以根據workdetail給超鏈接綁定點擊函數，在函數中與Teacher控制器的GetStudentWork-Model Action綁定，關鍵代碼如下。

采用這種動態綁定的方法，可以不用考慮班級學生的人數，將全部學生作業的超鏈接全部一次性的與相關函數綁定，并且根據作業id區別不同學生的作業。

4 結論

在上機考核系統的開發中，將以往基于WebForm的開發模式改進為基于MVC的開發模式，并且大量應用了JQuery、Ajax和JSon技術，不僅有效的提高的開發效率，而且開發完成的系統中，用戶體驗有了極大的提升，目前該應用系統已經在我院的信息工程系實訓機房投入應用，實訓教師普遍反映該系統應用簡便，相應速度快，不僅提高了上機作業和上機考核的效率，而且對學院的信息化水平提升起到了提升作用。

[1]俞新凱，曾光輝，毛敏.一種基于MVC設計模式的開發框架[J].軟件導刊.2015，14（6）：41-44.

[2]饒浩.MVC模式下的Web系統快速開發框架設計，微處理機[J]，2015，36（3）：69-72.

[3]張水利，董軍堂，馮敏娜.基于MVC模式的在線考試測評系統的設計與實現[J].現代電子技術，2015，38（14）：67-71.

[4]陳輝，丁春莉，孫悅.ASP.NET MVC軟件架構模式在學生實訓管理系統的應用[J].電子設計工程，2015，23（13）：11-15.

[5]李自勝，肖曉萍.基于.NET框架的新型 PACS系統設計[J].計算機工程與設計，2009，30（23）：5503-5505.

[6]郝雯，艾玲梅，王映輝.三層結構軟件框架擴展點實現方法[J].計算機應用，2009，29（9）:2541-2543.

[7]莫勇騰.深入淺出設計模式[M].北京:清華大學出版社，2006.

[8]王孝明，胡健，陸坤，等.基于.NET平臺可復用軟件框架的設計與實現[J].計算機工程，2004，30（22）:76-78.

[9]李寧，馬殿欣.MVC4中Ajax表單的實用編程[J].電腦編程技巧與維護 2015，48（18），46-50.

[10]趙貝貝，梅一垚.基于MVC的校園電子商城的設計與實現[J].電子技術與軟件工程，2015，32（1），85-88.

[11]曾琪，魯震霆.基于微軟Ajax實現前臺JS調用后臺C#方法[J].數字技術與應用，2015，22（9）:56-57.

[12]張耘凡，柳平增，馬鴻健，等.一種基于JSON的分布式系統架構[J].中國農機化學報，2015，36（9）:255-258.

[13]魯沛鑫.基于RESTful和JSON的超級炫鈴平臺OpenAPI的設計與實現[D].北京:北京郵電大學，2013.

[14]李艷春，李新，焦文彬.分布式信息系統中數據交換平臺設計與實現[J].計算機工程與設計，2012，33（7）:2640-2645.

[15]王鵬，吳曉東，楊華民.基于不同數據傳輸格式對Ajax實時性響應影響的研究[J].長春理工大學學報：自然科學版 ，2011，34（2）:146-149.

The application of Ajax and JQuery in the computer examination system based on WEB

DING Hua，CHEN Hui
（Shaanxi College of Communication Technology，Xi’an 710018，China）

Based on improving the efficiency of computer examination system interaction and humanized design，the purpose of the Web in the design of computer examination system，using ASP.NET MVC4 framework based on technology development and SQLServer2012 database system architecture，and used in the software design of the JQuery and Ajax technology，improve the effect of the interactive display of all kinds of data in the system，and the test release corrects，submit，achieved a better user experience in the design of each function.After the system test and application，can simplify the teacher on the inspection work，improve the efficiency of student assessment and submit，achieved the desired effect.

computer examination；JQuery；Ajax；WEB application

TN 311

A

1674－6236（2016）15-0016-04

2015-12-01 稿件編號：201512010

陜西省高等教育教學改革研究項目（15Z26）；陜西交通職業技術學院科研項目（YJ15002）

丁 華（1982—），女，甘肅武威人，碩士，講師。研究方向：計算機網絡應用、軟件開發。