html button 隐藏_java servlet与html数据交互初体验
最近作業要做一個servlet與html前后端交互的簡易網頁。實現的功能就是通過點擊按鈕進行圖片切換,還可以把后臺的數據顯示在前端。
需求比較簡單
1. 程序運行流程與功能:
界面效果如下
以一張效果圖作為背景圖片,將五個閥門按鈕貼在背景圖片上方,另有一個value=“點擊交互”的按鈕可以與servlet后臺交互數據。
進水閥門和進氣閥門只可以進行開關切換,下面三個閥門可以進行三檔切換,即關-慢開-快開三種狀態。而且慢開與快開狀態下閥門樣式也會切換。
點擊交互按鈕,后臺將定義好的json數據傳遞給前端,前端解析json數據包并顯示在頁面上。
2. 項目結構
project:.
├─.settings
├─build
│ └─classes
│ ├─lib
│ └─server
├─src
│ ├─lib
│ └─server
└─WebContent
├─img
├─META-INF
└─WEB-INF
└─lib
src:.
├─lib
│ commons-beanutils-1.7.0.jar
│ commons-collections-3.1.jar
│ commons-lang-2.5.jar
│ commons-logging.jar
│ ezmorph-1.0.3.jar
│ json-lib-2.1-jdk15.jar
│
└─server
server.java
3. 心得體會與遇到的問題
1) 在做前端頁面時,經常遇到按鈕控件無法選中的問題。原因是位于上面的圖層會把下面的圖層覆蓋,導致無法選中期待的圖片。.如圖所示,將button的style屬性中z-index值去掉,則無法選中button,被高亮的是旁邊的包含著閥門圖片的div框。所以z-index的設定必不可少
2) 在前端與后臺交互時,總是報錯server文件404.
百度后的結果大多是說要對web.xml編輯項目結構,把java文件寫入進去。后與同學交流后得知使用servlet2.5版本后,會在web.xml中自動生成結構。
3)在使用json包進行傳遞數據時,需要手動導入到項目的lib中。還要在src下的lib中導入一份,供其他類調用。
代碼如下:
<!DOCTYPE html> package 《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的html button 隐藏_java servlet与html数据交互初体验的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: abaqus python二次开发攻略_
- 下一篇: python3 循环写入一对多键值对_为