彭 勝

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

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

1 關鍵技術

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

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

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

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

2 數(shù)據格式轉換

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

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

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

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

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

(2)直接對ajax中的dataType屬性進行設置，將其設置為Json，也可以實現(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ù)據顯示功能

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

舉例，頁面定義如下：

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

$(document).ready(function () {

$(′#tt′).datagrid({

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

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

columns: [[{ field: ′rowId′, title:′序號′, width: 40, align:′center′},

{ field: ′ProjectName′, title:′項目名稱′, width: 120 },

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

pagination: false,

rownumbers: true,

});

}

4 前臺提交數(shù)據功能

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

示例代碼如下：

$.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("提示", "添加項目信息成功！","info");}

else if (json == 3) {

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

}

});

5 小結

通過在后臺與服務器進行少量數(shù)據交換，AJAX 可以使網頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新?？蚣艿氖褂锰岣吡碎_發(fā)效率，Json+ajax數(shù)據界面不刷新，頁面更加貼近客戶的需求，查詢效率大大提升。

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

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

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