1. 程式人生 > >有了html頁面,進行二次顯示,通過html、JavaScript、jQuery的ajax三種技術,我可以實現任何介面效果

有了html頁面,進行二次顯示,通過html、JavaScript、jQuery的ajax三種技術,我可以實現任何介面效果

當前j2ee的web工程開發, 最常用的前端顯示技術,有兩種:html、jsp。

場景:

以html為例,當用戶執行了某個操作,j2ee的web工程反饋了一個html頁面給使用者(其實不是這麼簡單,中間有渲染的過程,這裡略過,就當使用者得到了一個html頁面)。例如點選“新增”按鈕,得到了一個新增頁面userInfo_add.html。

而此時有個需求:點選userInfo_add.html頁面上的某個按鈕,可以對userInfo_add.html頁面進行任何自定的修改,如:

輸入身份證號,點選按鈕,則去後臺查詢有沒有這個人

1)如果有了,將這個人的所有資訊,在按鈕的下方顯示出來(姓名、性別、年齡、學歷等)。

2)如果沒有,就說查無此人,並且按鈕下方什麼都沒有,是空白的。

實現過程如下:

第一步:在html頁面上,新增觸發JavaScript函式的控制元件(button等)。

第二步:書寫JavaScript函式,對html頁面上的標籤、控制元件進行獲取。

第三步:在JavaScript函式中,通過jQuery的ajax,通過發起http 的url的request請求,去執行後端的java程式碼,並返回執行結果給JavaScript函式。

第五步:通過對返回結果進行解析,並對html頁面進行修改到預期摸樣,顯示給使用者。

我稱這種過程是,頁面的二次加工,也叫他二次渲染,也叫也不重新整理。為什麼稱之為二次?因為是對當前顯示的html頁面(稱為原始的html頁面)進行的二次加工,二次顯示。

要實現二次顯示,只需要html、JavaScript、jQuery的ajax三種技術,就可以實現任何介面(即介面先)。也就是說,畫板已經有了(即原始html頁面),你再想要任何什麼介面,我都可以給你實現。

而怎麼得到原始的html頁面,並在瀏覽器顯示?很簡單:

1)直接在瀏覽器中輸入http://127.0.0.:8080/testProject/index.html

注意:index.html不要放在Web-Inf下,而直接放在WebContent下。

2)在js中,書寫,window.location.href =“http://127.0.0.:8080/testProject/index.html”;

注意:index.html不要放在Web-Inf下,而直接放在WebContent下。

核心技術是jQuery的ajax。