layui使用form表單實現(xiàn)post請求頁面跳轉(zhuǎn)的方法

發(fā)布時間：2020-10-20 16:53:27 來源：腳本之家閱讀：1407 作者：HerbertXuTTT 欄目：web開發(fā)

如下所示：

window.location.href='url&#63;param=' + paramValue;

上面這種方式實現(xiàn)頁面跳轉(zhuǎn)附帶參數(shù)，容易造成信息泄露；

layui使用form表單實現(xiàn)post請求，避免信息泄露(設(shè)置form表單隱藏，也可以初始化時隱藏)：

這里是在數(shù)據(jù)表格查詢數(shù)據(jù)時的按鈕操作，其他操作類似

<table id="myTable" class="layui-table" lay-filter="myTableDetail" ></table>

數(shù)據(jù)表格具體配置查看layui文檔

<script type="text/html" id="detailBar">
 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">詳情</a>
</script>

下面action部分可以是具體的請求路徑，亦可以使*.do請求

<form action='${basepath}/requestMethodName' method='post' name='form1' style='display:none'>

 <input type=hidden name='param1' id="param1" value=''>
 <input type=hidden name='param2' id="param1" value=''>
</form>

js部分：

table.on('tool(myTable)', function(obj){
   var data = obj.data; // 選中的單條數(shù)據(jù)信息,后臺傳過來的數(shù)據(jù)全部可以獲取
   if(obj.event === 'detail'){ // 監(jiān)聽上面定義的按鈕
    // layer.msg('ID：'+ data.ID+ ' 的查看操作');
    // 提交前設(shè)置提交數(shù)據(jù),需要向后臺傳輸?shù)臄?shù)據(jù)，
    $('#param1').prop("value", data.param1);
    $('#param2').prop("value", data.param2);
    document.form1.submit();
   } 
 });

以上這篇layui使用form表單實現(xiàn)post請求頁面跳轉(zhuǎn)的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細節(jié)

layui使用form表單實現(xiàn)post請求頁面跳轉(zhuǎn)的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽