layer使用post傳送請求載入資料
阿新 • • 發佈：2019-02-19
前言：layer 是一個很好用的彈框插，文件也非常詳細，具體可以去官網檢視、非常簡單好用。
官網地址：點選開啟連結
基礎： layer.open彈出框的幾個 重要 基本屬性
1）type：彈出層型別，代表彈出框層的型別，(這對於載入彈框內容非常重要，也是解決問題的關鍵）
可選值有：0（資訊框，預設）1（頁面層）2（iframe層）3（載入層）4（tips層）
2) content：彈出框內容
問題示例如下：
解決方案：
重新回到 layer.open 的 type屬性中，因為 type設定為 2時，代表當前彈出層為一個iframe，而傳送的請求型別暫時無法修改（雖然我嘗試過開啟layer原始碼js，把GET請求的都直接修改為POST，但沒生效），所以只能改變策略。
思路：
1），先使用ajax 傳送一個post 請求獲得要展示的結果介面。
2），定義layer.open 的型別為 1，將結果直接用以頁面層顯示。
解決示例：
附：
官網地址：點選開啟連結
基礎： layer.open彈出框的幾個 重要 基本屬性
1）type：彈出層型別，代表彈出框層的型別，(這對於載入彈框內容非常重要，也是解決問題的關鍵）
可選值有：0（資訊框，預設）1（頁面層）2（iframe層）3（載入層）4（tips層）
2) content：彈出框內容
問題：
使用layer.open 開啟一個彈出框後，（通過屬性 content 載入彈出框中的內容，因為我 需要在載入彈出框後，傳送一個url請求動態載入資料，所以type設定為2，那麼問題來了，當url的引數過大時，GET 請求就搞不定了，而layer預設就是使用get請求，layer又沒有引數可以設定調整為POST。
問題示例如下：
layer.open({ type: 2,//彈出框型別 title: 'layer彈出框post傳參測試', shadeClose: false, //點選遮罩關閉層 area : ['60%' , '90%'],//彈出框大小 shift:1,//彈出框動畫效果 content: 'http://localhost:8080/test?param1='+p1+"param2="+p2, //傳送一個請求，後臺處理資料返回到一個html頁面載入到layer彈出層中 success: function(layero, index){ } });
解決方案：
重新回到 layer.open 的 type屬性中，因為 type設定為 2時，代表當前彈出層為一個iframe，而傳送的請求型別暫時無法修改（雖然我嘗試過開啟layer原始碼js，把GET請求的都直接修改為POST，但沒生效），所以只能改變策略。
思路：
1），先使用ajax 傳送一個post 請求獲得要展示的結果介面。
2），定義layer.open 的型別為 1，將結果直接用以頁面層顯示。
解決示例：
$.ajax({ type: 'POST', url: 'http://localhost:8080/test',//傳送請求 data: {param1:p1,param2:p2}, dataType : "html", success: function(result) { var htmlCont = result;//返回的結果頁面 layer.open({ type: 1,//彈出框型別 title: '傳播層級使用者詳情', shadeClose: false, //點選遮罩關閉層 area : ['60%' , '90%'], shift:1, content: htmlCont,//將結果頁面放入layer彈出層中 success: function(layero, index){ } }); } });
附：