SSM框架JSP使用Layui實現layer彈出層效果_JSP編程

來源:腳本之家  責任編輯:小易  

只要你啟動成功了,就可以訪問,請你詳細描述下是為什么不能訪問,如果是Tomcat啟動失敗,請貼上報錯的截圖www.anxorj.tw防采集請勿采集本網。

最近做的系統里,使用layui當作前端的框架,就是用了layui自帶的layer彈出層,效果圖如下。

我自己做了一個項目,是一個電商網站,就是用ssm做的,我自己那些文檔也寫了一些,項目并不完整,只做了用戶的相關功能,商家后臺管理都沒做,如果你想要,回頭就給你鏈接!

首先,導入layui需要的css,js文件,這個就不需要多說了。但是有關鍵的一步必須要做,也是許多新手會常犯的錯誤,就是沒有預定義layui的form和layer,導致表單和彈出層不顯示。

SSM(百Spring+SpringMVC+MyBatis)框架集由Spring、SpringMVC、MyBatis三源框架整合作數據源較簡單web項目框架 度其知spring輕量級控制反轉(IoC)面向切面(AOP)容器框架道 SpringMVC離控制器

下面是layui的預定義。

首先: SSH框架是Struct+Spring+Hibernate的總稱 SSM框架是Spring-MVC+Spring+MyBatis的總稱 應用當中的區別主要體現3、使用SSH框架sql語句寫在Dao層,而使用SSM框架sql語句是寫在配置文件中的。

layui.use(['jquery', 'table', 'layer', 'form'], function() { // 加載layui模塊,使用其推薦的【預先加載】方式,詳見官網【模塊規范】一節 var $ = layui.$; var table = layui.table; var layer = layui.layer; var form = layui.form;

jsp+servlet+javabean的開發模式 需要寫很多的重復代碼,比如固定使用SSH框架你可以不用深入了解它的深層原理便可以完成相關開發,所以說開發的效率化是其最大的優點。初學者的一點感覺,純手打,望采納~

定義完之后可以先寫layer彈出層的表單樣式,下面是我的layer彈出層表單樣式。

1.從JSP頁面里傳數據到SpringMVC中的Controller處理 a.直接讀取表單的數據。在控制器里的方法里,按照這種格式寫。RequestMapping(value=\"/login.action\") public void login

<!-- 更新會議彈出層 --><div id="update-layer" style="display: none; padding: 20px"> <form id="update-form" class="layui-form layui-form-pane" lay-filter="update-form"> <div class="layui-form-item" style="display: none;"> <label class="layui-form-label">ID</label> <div class="layui-input-block"> <input type="text" name="id" class="layui-input" readonly> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">會議主題</label> <div class="layui-input-block"> <input type="text" name="subject" class="layui-input" lay-verify="required" autocomplete="off"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">備注</label> <div class="layui-input-block"> <textarea name="remarks" placeholder="請輸入內容" class="layui-textarea" ></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="update-form-submit">提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form></div>

下面是layer彈出層需要的代碼。      

//監聽行工具事件 table.on('tool(test)', function(obj){ var data = obj.data; //console.log(obj) if(obj.event === 'del'){ $.ajax({ url: "/delMeeting", type: "POST", data: {id: data.id,roomShStatus: data.roomShStatus}, success: function (msg) { if (msg) { //刪除這一行 obj.del(); //關閉彈框 layer.msg("刪除成功", {icon: 6}); } else { layer.msg("刪除失敗", {icon: 6}); } } }); } else if(obj.event === 'update'){ // 每次顯示更新會議室的表單前自動為表單填寫該行的數據 form.val('update-form', { "id": data.id, "subject": data.subject, "remarks": data.remarks }); // 顯示更新用戶表單的彈出層 layer.open({ type: 1, title: '更新會議室', skin: 'layui-layer-molv', area: ['500px'], content: $('#update-layer') }); // 更新會議室表單提交 form.on('submit(update-form-submit)', function(data) { // ajax方式更新會議室 $.ajax({ url: "updateMeeting", type: "POST", data: JSON.stringify(data.field), contentType: 'application/json', dataType: 'json', success: function(data) { if (data.status == 0) { layer.close(layer.index); layer.msg('更新成功'); table.reload('test'); $("#update-user-form")[0].reset(); layui.form.render(); } else if(data.status == 1) { layer.close(layer.index); layer.msg('更新失敗'); $("#update-user-form")[0].reset(); layui.form.render(); } }, error: function() { console.log("ajax error"); } }); // 阻止表單跳轉 return false; }) } });

直接復制上面的代碼,稍作修改,就可以生成自己想要的layer彈出層了

總結

以上所述是小編給大家介紹的SSM框架JSP使用Layui實現layer彈出層效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對真格學網網站的支持!

如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

純用JSP寫網站的話,連接數據庫、處理數據的操作都要在頁面中完成,冗余代碼會比較多,升級維護比較困難ssh框架提供了很多jar包,也就是幫助開發者使用的一些程序功能,使用ssh框架還會強制開發者使用規范的結構,這樣有利于分工合作和項目的升級維護內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • 使用layui的layer組件做彈出層的例子
  • 解決layui彈出層layer的area過大被遮擋的問題
  • 在layui中layer彈出層點擊事件無效的解決方法
  • 解決layer彈出層自適應頁面大小的問題
  • 解決layer彈出層的內容頁點擊按鈕跳轉到新的頁面問題
  • layer實現關閉彈出層刷新父界面功能詳解
  • 詳解layer彈出層樣式
  • jquery layer彈出層傳值到父頁面的實現代碼
  • 十二、腳本元素、指令和預定義變量
  • spring注入date類型的三種方法總結
  • js實現隨機的四則運算題目效果
  • 建立jsp操作以提高數據庫訪問的效率
  • jsp連接sql server 2000系統配置
  • 微信支付 開發賬號體系各參數詳解
  • jsp驗證碼動態生成方法
  • rmi使用學習 小結
  • jsp實現的簡單分頁顯示效果代碼
  • spring mvc之dispatcherservlet_動力節點java學院整理
  • jsp與ssh框架的區別
  • ssm框架已搭建好單純運行jsp頁面不行嗎
  • java框架組合ssm和ssh各自的優勢是什么?
  • servlet 和 jsp與SSH框架做的項目有什么不同
  • Java,現在我用ssm框架寫一個新項目
  • ssm框架怎么使用事務和存儲過程
  • SSM框架和SSH框架的區別
  • 傳統的javaweb開發(jsp+servlet+javabean)與SSH框架各有什么樣的優缺點,希望能夠做一個對比
  • SSM框架下jsp頁面怎么獲取數據庫的數據
  • 在ssh框架下,如何從一個jsp頁面直接跳轉到另一個jsp頁面,而不經過action。
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全javascriptasp.netphp編程ajax相關正則表達式asp編程jsp編程編程10000問css/htmlflex腳本加解密web2.0xml/rss網頁編輯器相關技巧安全相關網頁播放器其它綜合dart首頁jsp編程使用layui的layer組件做彈出層的例子解決layui彈出層layer的area過大被遮擋的問題在layui中layer彈出層點擊事件無效的解決方法解決layer彈出層自適應頁面大小的問題解決layer彈出層的內容頁點擊按鈕跳轉到新的頁面問題layer實現關閉彈出層刷新父界面功能詳解詳解layer彈出層樣式jquery layer彈出層傳值到父頁面的實現代碼十二、腳本元素、指令和預定義變量spring注入date類型的三種方法總結js實現隨機的四則運算題目效果建立jsp操作以提高數據庫訪問的效率jsp連接sql server 2000系統配置微信支付 開發賬號體系各參數詳解jsp驗證碼動態生成方法rmi使用學習 小結jsp實現的簡單分頁顯示效果代碼spring mvc之dispatcherservlet_動力節點java學院整理jsp el表達式詳細介紹jsp下頁面跳轉的幾種方法小結jsp生成頁面驗證碼的方法[附代碼在jsp頁面如何獲得url參數spring mvc 框架搭建配置方法及詳jsp web.xml文件的作用及基本配置jsp自定義標簽taglib實現過程重點servlet+jsp實現圖片或文件的上傳將html頁改成jsp的兩種方式jsp 連接mysql配置與使用jsp hibernate 函數簡介jsp無法提交nicedit中的內容的解決方法一個用jsp做的日歷jsp連接mysql/ms sql server/oracle數據庫asp.net getremoteaddr()與 getremotehosiis6 和tomcat5 的整合jsp與servlet的介紹說明jsp使用cookie存儲中文示例分享jsp教程(一)詳解jsp中使用過濾器進行內容編碼的解決辦
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载