基于JQuery框架的報(bào)表系統(tǒng)數(shù)據(jù)交互應(yīng)用

彭 勝

(中鋁國(guó)際工程股份有限公司，北京 100093)

JQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架。報(bào)表系統(tǒng)開發(fā)時(shí)經(jīng)常需要實(shí)現(xiàn)界面?zhèn)髦档胶笈_(tái)，通過參數(shù)進(jìn)行查詢，并且將查詢結(jié)果通過函數(shù)數(shù)據(jù)傳過來，最后顯示到界面上。這樣的功能通過JQuery EasyUI、Ajax、Json以及一般處理程序之間的相互配合更容易實(shí)現(xiàn)。

1 關(guān)鍵技術(shù)

JQuery EasyUI是一組基于jQuery的UI插件集合，用來幫助WEB開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。開發(fā)者無需編寫復(fù)雜的javascript，也無需對(duì)css樣式有深入的了解，只需要借助一些簡(jiǎn)單的html標(biāo)簽，如combobox、menu、dialog、tabs、validatebox、datagrid、window、tree等，即可以使用JQuery EasyUI提供的大量豐富的UI控件。

Ajax 即“Asynchronous Javascript And XML”(異步 JavaScript 和 XML)，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。傳統(tǒng)的網(wǎng)頁(不使用 Ajax)如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁頁面，容易增加服務(wù)器負(fù)荷；另一方面數(shù)據(jù)量大時(shí)用戶操作友好性大大降低。通過使用Ajax在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，可以使網(wǎng)頁實(shí)現(xiàn)異步更新，即整個(gè)網(wǎng)頁不重新加載，僅對(duì)網(wǎng)頁的局部根據(jù)需要進(jìn)行更新，更快更友好的對(duì)用戶操作進(jìn)行響應(yīng)。

JSON(JavaScript Object Notation, JS 對(duì)象標(biāo)記) 是一種輕量級(jí)的數(shù)據(jù)交換格式,它采用完全獨(dú)立于編程語言的文本格式來存儲(chǔ)和表示數(shù)據(jù)。JSON數(shù)據(jù)對(duì)象更易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率。JSON簡(jiǎn)潔和清晰的層次結(jié)構(gòu)使它成為理想的數(shù)據(jù)交換語言，通過JSON格式可以很方便的實(shí)現(xiàn)前臺(tái)數(shù)據(jù)和后臺(tái)模型間的交互。

在Asp.net中，請(qǐng)求的真正處理是在處理程序這個(gè)環(huán)節(jié)。處理程序負(fù)責(zé)完成實(shí)際的請(qǐng)求處理工作，對(duì)于開發(fā)者來說，大多數(shù)的開發(fā)工作都是圍繞著處理程序展開的。在Asp.net中，所有的處理程序類必須實(shí)現(xiàn)IHttpHandler接口(同步)或者實(shí)現(xiàn)IHttpAsyncHandler接口(異步)。Process Request是IHttpHandler接口的主要方法，接收并通過一個(gè)HttpContext類型的請(qǐng)求上下文對(duì)象，處理程序可以得到關(guān)于處理請(qǐng)求所需的信息。通過 HttpContext的Response屬性可以得到響應(yīng)的對(duì)象，用以向客戶端返回服務(wù)器處理的結(jié)果。

2 數(shù)據(jù)格式轉(zhuǎn)換

在EasyUI中使用Ajax+Json實(shí)現(xiàn)前后的數(shù)據(jù)交互時(shí)，當(dāng)后臺(tái)數(shù)據(jù)傳輸?shù)娇蛻舳藭r(shí)需對(duì)Json數(shù)據(jù)進(jìn)行解析，有兩種數(shù)據(jù)解析方式：

(1) 對(duì)于服務(wù)器返回的數(shù)據(jù)若沒有做類型說明，需要將接收的字符串做對(duì)象化處理，即用eval()方法進(jìn)行處理。eval函數(shù)可將一個(gè)JavaScript代碼字符串求值成特定的對(duì)象，利用其可以完成JSON對(duì)象的解析。eval()解析JSON字符串要加上括號(hào)， Json對(duì)象是“{}”的方式來開始以及結(jié)束的，在JS中，它會(huì)被當(dāng)成一個(gè)語句塊來處理，加上圓括號(hào)為了處理字符串為表達(dá)式，而不是語句(statement)來執(zhí)行。示例如下：

alert(eval("{}")); // return undefined

alert(eval("({})"));// return object[Object]

IE8以上版本瀏覽器可支持JSON.parse函數(shù)，能解析屬性名是雙引號(hào)包裹的字符串對(duì)象，并會(huì)忽略換行和空格(值外面)，其對(duì)JSON字符串的規(guī)范性要求較高。

(2)直接對(duì)ajax中的dataType屬性進(jìn)行設(shè)置，將其設(shè)置為Json，也可以實(shí)現(xiàn)Json的解析：

$.ajax({

type: "POST",

url: "../JSON/ Project.ashx?Order=Delete",

data: { id: id },

dataType: "json",

success: function (json) {

if (json.result) {$.messager.alert("提示", "刪除成功", "info");}

else {$.messager.alert("提示", "刪除信息失敗!", "info");}

}

});

3 頁面數(shù)據(jù)顯示功能

通過EasyUI的相應(yīng)控件(panel、datagrid等)，可以輕松的實(shí)現(xiàn)同類數(shù)據(jù)的列表顯示功能；通過easyui-datagrid的toolbar工具欄設(shè)置，實(shí)現(xiàn)查詢等其他列表數(shù)據(jù)的操作。

舉例，頁面定義如下：

為實(shí)現(xiàn)數(shù)據(jù)的正確加載，需要在html頁面載入后加載該列表數(shù)據(jù)并進(jìn)行顯示；在數(shù)據(jù)查詢條件單擊查詢按鈕后可以對(duì)列表數(shù)據(jù)進(jìn)行篩選刷新，相應(yīng)實(shí)現(xiàn)js代碼如下：

$(document).ready(function () {

$(′#tt′).datagrid({

url: ′../JSON/ Project.ashx?Order=SelectProjList′ ,

財(cái)務(wù)公司的運(yùn)營(yíng)與發(fā)展實(shí)際上與企業(yè)集團(tuán)的戰(zhàn)略發(fā)展有緊密的聯(lián)系，但是很多財(cái)務(wù)公司在產(chǎn)業(yè)鏈金融方面沒有體現(xiàn)出企業(yè)集團(tuán)的戰(zhàn)略性。很多企業(yè)集團(tuán)對(duì)于財(cái)務(wù)公司來說有絕對(duì)的控制權(quán)，很多時(shí)候都將財(cái)務(wù)公司看作原有資金管理的補(bǔ)充，因此，財(cái)務(wù)公司在職能上只是簡(jiǎn)單等價(jià)于商業(yè)銀行，有時(shí)候還會(huì)把企業(yè)子公司的管理制度應(yīng)用于財(cái)務(wù)公司而導(dǎo)致財(cái)務(wù)公司承擔(dān)自身職責(zé)以外的任務(wù)，影響財(cái)務(wù)公司科學(xué)地運(yùn)營(yíng)。部分企業(yè)集團(tuán)在對(duì)財(cái)務(wù)公司的評(píng)價(jià)中過度的追求經(jīng)濟(jì)效益，沒有體現(xiàn)出財(cái)務(wù)公司與企業(yè)集團(tuán)的長(zhǎng)遠(yuǎn)發(fā)展，因此財(cái)務(wù)公司開展產(chǎn)業(yè)鏈金融服務(wù)也缺乏良好的戰(zhàn)略性。

columns: [[{ field: ′rowId′, title:′序號(hào)′, width: 40, align:′center′},

{ field: ′ProjectName′, title:′項(xiàng)目名稱′, width: 120 },

{ field: ′CustomerName′, title:′客戶名稱′, width: 80 }]],

pagination: false,

rownumbers: true,

});

}

4 前臺(tái)提交數(shù)據(jù)功能

頁面需要將用戶的修改數(shù)據(jù)提交到服務(wù)器端，通過一般處理程序里的指定功能項(xiàng)對(duì)其進(jìn)行處理，通過AJAX的POST方式或其他方式，將需要處理的數(shù)據(jù)用JSON類型的數(shù)據(jù)封裝在data里，指定其dataType為json。在success的相應(yīng)處理函數(shù)里接收服務(wù)器對(duì)此次提交數(shù)據(jù)的相應(yīng)，在前臺(tái)提示給用戶。

示例代碼如下：

$.ajax({

type: "POST",

url: "../JSON/Project.ashx?Order=AddProj",

data: { ProjectName: $(′#ProjectName′).val() + "",

CustomerName: $(′#CustomerName′).val() + ""},

dataType: "json",

success: function (json) {

if (json == 1) {$.messager.alert("提示", "添加項(xiàng)目信息成功！","info");}

else if (json == 3) {

$.messager.alert("提示", "添加項(xiàng)目信息失??！", "info");}

}

});

5 小結(jié)

通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。框架的使用提高了開發(fā)效率，Json+ajax數(shù)據(jù)界面不刷新，頁面更加貼近客戶的需求，查詢效率大大提升。

[1] 華英.基于EasyUI框架的數(shù)據(jù)交互的應(yīng)用和研究[J].信息與電腦(理論版),2017(14):19-20.

[2] 龔建華. JSON格式數(shù)據(jù)在Web開發(fā)中的應(yīng)用[J]. 辦公自動(dòng)化,2013(20):46-48.

[3] 李志秀,張軍,陳光,楊麗紅. JQuery Ajax異步處理JSON數(shù)據(jù)在項(xiàng)目管理系統(tǒng)中的應(yīng)用[J]. 云南大學(xué)學(xué)報(bào)(自然科學(xué)版),2011,33(S2):247-250.