徐嘉裕(Neil Hsu)的工作心得網誌!

cookie運作原理是吧伺服器端的資料儲存於user端的瀏覽器中，然後可讀寫cookie值，通常用於網站登入儲存會員密碼之類的，但也能作為區隔同ip多台電腦或同電腦多個不同瀏覽器的識別，只需要在網站首次進入時寫入一組cookieid即可。 不過問題來了，php雖然可以使用setcookie()寫入cookie，但卻無法判斷user端的cookie是否啟用(cookie是在瀏覽器前端執行)，用js也能寫入cookie並判斷是否啟用，但所需的參數還是需要php先輸出到樣板在用js取值寫入，怎麼用都很麻煩的感覺。 解決方案就是用js來判斷user端的cookie是否啟用，若啟用直接用ajax在php端setcookie()寫入cookie，這樣整合起就能吧js跟php不足的地方都補齊了，方便好用。 以下為code範例 //tpl樣板部分 <!-- 載入cookie --> <script type="text/javascript" src="<{$xoops_url}>/modules/模組ID/js/cookie.js"></script> <script>var xoopsjsurl='<{$xoops_url}>';</script> //js部分 //建立一個cookie.js檔並放置以下內容 //判斷cookie是否啟用並寫入cookieid $(document).ready(function() {   if (typeof(getCookieByName('cookieid')) != 'undefined') return  //判斷指定cookie是否有建立，空值才執行以下程式   var dt = new Date();   dt.setSeconds(dt.getSeconds() + 60);   document.cookie = "cookietest=1; expires=" + dt.toGMTString(); //建立一個測試cookie   var cookiesEnabled = document.cookie.indexOf("...

會使用到Ajax長輪詢功能也是意外，本來是想用JS跨域查詢，由A頁面查詢B頁面執行ajax程序後返回值做同步處理，結果經測試JS跨域查詢只能查到讀取頁面的原始資料，無法取得JS程序處理過後的變動數值，試了半天，只好用Ajax長輪詢來解決問題了，順便寫一個工作心得做為紀錄 Ajax長輪詢跨頁資料查的運作原理如下圖 以上圖解也就是使用Ajax長輪詢保持連線持續查詢資料庫，若有比對到資料則返回數值後以非同步方式更新內容，沒有就繼續查，保持連線狀態，舉一個Ajax長輪詢應用實例大家就清楚了，FB上貼文留言，即便未更新頁面，有其他用戶的的留言也會即時顯示在留言處，這就是使用了Ajax長輪詢的效果讓Ajax一直保持在 連線查詢返回更新 狀態，即時同步資料。 以下為Ajax長輪詢CODE 範例 //HTML結構 <div id='showbox'><span id='numberbox'> 30 </span></div> <script>ajaxlongpolling();</script> // 30 為固定值，透過JS取值後傳送到ajax.php比對資料 //JS結構-$.ajax function ajaxlongpolling() { $.ajax({ url: 'ajax.php', timeout: '80000', //ajax請求超時時間80秒 type: 'POST', data: { var1: $("#numberbox").text(), //取的#numberbox中數值 timedate: '80' //40秒後無論結果伺服器都返回數據 }, success: function(response) { var $response_arr = response.split(','); //切割陣列 //返回1->查詢到資料-重新讀取ajaxlongpolling(); if ...

現在很多網站排序都是採用拖曳式的，但拖曳也並非萬能，像是有分頁的資料或是有幾百筆以上的資料或是階層式資料用拖曳就很累了，還是用輸入排序編號比較方便，所以如果要用拖曳的排序最好是在20~30筆以內資料為佳，這裡分享一個使用jquery-ui.js的sortable做一個tabe拖曳排序功能方法如下： HTML結構部分 (紅字為拖曳需要增加的部分) <table class='table  sortable' > <thead> <tr> <th>標題1</th> <th>標題2</th> <th>標題3</th> </tr> </thead> <tbody> <tr class='tr' id='1' > <td>text1</td> <td>text1</td> <td>text1</td> </tr> <tr  class='tr'   id='2' > <td>text1</td> <td>text1</td> <td>text1</td> </tr> <tr  class='tr'  id='3' > <td>text1</td> <td>text1</td> <td>text1</td> </tr> </tbody> </table> //引入JS (如Xoops佈景已有引入則不需重複引入) <script src="http://tool.phpddt.com/resources/js/jquery-1....

之前寫過一篇【Bootstrap3瀑布流排版用JS套件-Masonry-教學】 https://neohsuxoops.blogspot.com/2019/08/bootstrap3js-masonry.html 不過這方法只能用在已讀出的資料樣板排版上，例如PHP讀出50筆，然後可以用這個方法來做瀑布流排版，但如果要應用在AJAX上則需要再做修改才能應用。 例如像 pinterest 網站，預設資料只出現幾筆，然後瀏覽器卷軸到底之後又會出現資料，一直循環開啟到資料全部讀完，以AJAX非同步方式求取資料的瀑布流效果。 AJAX結構跟運作原理就不多說了，這裡直接是masonry套件+imagesloaded套件在AJAX中的應用方式，CODE如下。 1、先在樣板裡面引入三支檔 <script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="js/masonryajaxjs.js"></script> //此為呼叫AJAX的JS檔需自行建立 2、在樣板上貼上以下的function，放在三個引入檔的下方 <script> function masonryfunction(){ $('.masonry').imagesLoaded(function() { var msnry = new Masonry(".masonry",{  itemSelector: '.item', columnWidth: <{$enshow.columnWidth}>,   //單個物件寬度 gutter: <{$enshow.gutter}>,   //物件邊距 isFitWidth: true...

正常來說，如果要在function中回傳變數只需要使用return即可! 例如 function test(){ var $result='12345'; return result; } alert(test()); //顯示12345 那如果在function中執行$.ajax不就是 function test(){ $.ajax({ url : 'test.php', type : "post", data : {}, async : false, success : function(data) { var result =data ; } }); return result; } 很抱歉這樣寫是什麼值都回傳不出去的，因為$.ajax的data變數是在test.php完成操作後接收回傳值產生的，所以$.ajax預設是不存在data變數，這樣會導致function在執行時 return result;並無變數而產生程式錯誤(js變數需要宣告)，解決方法就是在function中宣告一個變數預設值即可! function test(){ var result =false ; //預設值 $.ajax({ url : 'test.php', type : "post", data : {}, async : false, success : function(data) { result =data ; //回傳值 } }); return result; } 這樣就沒問題了，可以吧function中$.ajax的data回傳變數使用return回傳出去! 有需要的朋友參考看看! 教學撰寫： 徐嘉裕 Neil hsu

基本上發明session的時候還沒AJAX技術，所以session設計上根本沒考慮到AJAX非同步切換時儲存積存阻塞的問題，換句話說如果用AJAX重複切換某個項目，而該項目會觸發session寫入資料，就會產生積存阻塞，後面的值完全存不進去session，所以解決方法可以使用PHP7的session_start函數來變更session的php.ini初始值設定，但還是必須要透過刪除session切換才能防止session積存阻塞。 舉例來說，像這樣的ajax多層選單切換觸發內容的session寫入! 如果每切換一層就觸發一次session寫入那用什麼方法都沒用，一定會積存阻塞，所以做一個送出按鈕來取選單最後的值，這樣就不會在開啟選單時觸發session寫入!如果變動選單則吧選單的var清空，重新用按鈕來取值! 然後ajax.php結構就能這樣寫! if(empty($of_sortid)){      //選單空值時 unset($_SESSION['xoops_mod_name']);    //刪除session //CODE內容略.......................... }else{      //選單有值時 session_start([     //初始化session_start設定 'cache_limiter' => 'private', 'cache_expire' => 0, 'cookie_lifetime'=>0, 'read_and_close' => true, ]); $_SESSION['xoops_mod_name'] = $var;    //存入session //CODE內容略.......................... } 經測試這樣用AJAX連動選單重複存入session已無積存阻塞問題，數值都能寫入session中，目前能用的方法只能這樣了!其他都試過了不可行!!有需要的朋友參考看看! 教學撰寫： 徐嘉裕 Neil hsu

最近在開發影片模組需要能夠崁入facebook影片，這部分技術上倒不是很困難，但遇到一個非常棘手的問題，就是facebook影片沒有提供縮圖網址服務，不像youtube那麼善心有專門的影片縮圖網址輸入帶入影片ID就能取用，如果首頁同時也多個FB影片要展示然後直接用影片播放器那網站就會整個死當在那裡，需要大量讀取頻寬會被消耗殆盡，所以必須去取得facebook影片縮圖才行。 首先facebook影片並不是沒有縮圖，如果吧影片崁入播放還沒play之前預設其實就是代表圖，像是下圖紅框的就是代表圖。 但縮圖是包在整個html5播放器裡面的(在iframe的src裡面)，沒有參數可以拿，網址也是獨立的，要拿縮圖真的非常的困難，但天下沒有解決不了的事情，花了些時間還是找到取得縮圖的方法。 試過無效的方法 1、如果想用js直接解析iframe的src提取圖檔連結是不可能的，因為js不允許跨域取得子框架參數。 2、如果用php的file_get_contents開啟iframe中頁面也是不可能的，FB禁止檔案被外部讀取。 唯一能用的只有curl_init讀取FB檔案，而且還必須偽裝成是Google Bot爬蟲才行! 整個取得facebook影片縮圖的方法如下，因為非常的麻煩，如果沒耐心的建議可以跳過了。 1、HTML結構 需要有一個文字框可以輸入FB影片網址 <form  id='preventDefault'  class="form-horizontal" role="form" action='<{$xoops_url}>/modules/模組ID/videocenter.php' method='post' > <input type='text' id='url' class=' form-control' name='url'  value='' placeholder='輸入影片連結'> <input type='hidden' name='tmburl'...

如果要做一個AJAX讀取條，像是用在瀑布流讀取資料這樣的特效，方法如下： 使用JQuery AJAX 中的complete，beforeSend這兩個參數。 complete：請求完成時執行的函式(不論結果是success或error)。 beforeSend：發送請求之前會執行的函式。 //AJAX-CODE $.ajax({ url: xoopsjsurl + '/modules/neilwenchuang/ajax.php', type: 'POST', data: { id: $id, sortid:$sortid, number:$number }, cache:false, ifModified :true, async:false, success: function(response) { if(response=="") return false; //空值終止程式 $("#waterfallsflowformboxajax").before("<div id='waterfallsflowformboxajax"+$number+"'>"+response+"</div>"); }, beforeSend:function(){  //發送請求之前會執行的函式 $('#allrecordsimg').show(); }, complete:function(){ //請求完成時執行的函式 $('#allrecordsimg').hide(); },    error: function() { console.log('ajax error!'); } }) //HTML-CODE <p id='allrecordsimg'></p> //...

客戶剛好需要做一個瀑布流功能的介面，瀑布流主要功能就是當捲軸拉到瀏覽器底時觸發資料，像是下圖這樣。 詳細程式結構就不描述了，這裡主要是說明透過jQuery觸發ajax讀取資料及控制顯示數量的操作方式，之後如果有需要可以再做其他延伸開發，code如下： HTML結構 <div id='centerbox'> <div class="row customrow"> <{foreach item=boxArr from=$wenchuangshow.neilwenchuangbox}> <div class="col-md-6 customrowcol-md-6"> <div id='contentbox'> <{$boxArr.contentbox}> </div> </div> <{/foreach}> <div id='waterfallsflowbox' name='1,<{$wenchuangshow.sortidDB}>'></div> //瀑布流取值 <div id='waterfallsflowformboxajax' name='0' ></div> //建構瀑布流區 //備註：name='0'為預設值，到時候會透過AJAX回傳數量然後JS在讀取數量來控制顯示筆數 </div> </div> JS結構 //偵測捲軸位置如果到底觸發waterfallsflowboxajax()函數 $(window).scroll(function(){ var scrollint = $(window).scrollTop(); if ($(window).height() + $(window).scrollTop() == $(document).height()) { $ajaxsetup = $("#waterfallsflowbox...

之前寫了一篇心得是【 ajax使用FormData物件上傳檔案 】，那方法只針對單一檔案上傳，如果是多檔要使用FormData物件上傳需要修改一下檔案的取值方式，方法如下。 <input class="form-control" id="blockimg" type="file"  multiple/> <button id="upload">Upload</button> //$.ajax  $('#upload').on('click', function() {     var form_data = new FormData();  //建構new FormData()       for(var i=0; i<$('#blockimg')[0].files.length;i++){                    form_data.append('file[]', $('#blockimg')[0].files[i]);                }                                    $.ajax({                 url: 'upload.php',                 cache: false,                 contentType: false,   ...

如果是php表單要上傳物件只需要在form裡面加上enctype="multipart/form-data然後使用input type="file"就能吧檔案陣列中的五個屬性值一起上傳透過$_FILES["file"]來接收變數，然後使用php的製作圖檔或是檔案上傳程式來做後續處理，但如果是ajax表單是沒有form可以使用的，必須透過js取值然後用ajax來處理，好朋友一定認為這樣就能取到type="file"的值了。 var $upfile= $('input[name=file]').val(); 抱歉這樣只能抓到檔案路徑，檔案屬性是抓不到的，所以即使變數送出去也無法建立檔案，用js要抓取檔案屬性的方法必須使用 FormData 物件才行，請看以下說明： //html結構 <input class="form-control" id="blockimg" type="file" > <button id="upload">Upload</button> //$.ajax  $('#upload').on('click', function() {     var file_data = $('#blockimg').prop('files')[0];    //取得上傳檔案屬性     var form_data = new FormData();  //建構new FormData()     form_data.append('file', file_data);  //吧物件加到file後面                                    $.ajax({                 url: 'upload.php',     ...

JS如要接收ajax.php回傳變數值，最常用的方法就是使用dataType: 'json'，然後在ajax.php使用陣列方式來傳遞變數，像是下面這樣 $res['1']=123; $res['2']=456; echo json_encode($res);exit; 但最近想出一個更簡單的方法來讓js來接收ajax.php回傳變數值，也不需要使用到json，只要吧變數用 , 串接起來就好了，例如： $text="".$var1.",".$var2.",".$var3.",".$var4.",".$var5.""; echo $text; 這樣在JS的$.ajax的success: function(response) {}裡面加上 var $response_arr = response.split(' , '); //切割陣列 $var1=$response_arr[0]; $var2=$response_arr[2]; $var3=$response_arr[3]; $var4=$response_arr[4]; $var5=$response_arr[5]; 吧原本串接的5個變數切割成5個列陣，這樣就能輕鬆的接收ajax.php回傳的變數值了，感覺比json好用，有需要的朋友可以參考看看! 教學撰寫： 徐嘉裕 Neil hsu

這總情況是會發生在假設submit按鈕觸發後需要POST傳參到指定網址但又需要用AJAX儲存資料，就需要建立先後順序，雖然不建順序也是可以的，因為POST之後會有秒差足夠AJAX儲存資料，但如果發生系統負載過重導致AJAX未成完成資料儲存，網頁就已經action到其他頁面了，就會發生ajax資料未被存入的情況，解決方法就是鎖住外連設定先後順序，先存AJAX完成後再啟用submit()，這樣就不會有問題了，方法如下： HTM結構 <form action='URL' method='post' id="print" > 於form加上 id="print" 設定 <button type='submit' id='btn' class="btn btn-danger btn-block btn-lg"> 送出</button> </form> JS部分  $("body").on("click", "#btn", function (e){ e.preventDefault();      //加上鎖住外連設定  $.ajax({     url: xoopsjsurl + '/modules/neillibrary/ajax.php',     type: 'POST',      data: { id: 1,                 var:$avr                                  },         success: function(response) {     $('#print').submit();  //啟用submit(); ...

通常在首頁的商品分類選單都是顯示第一層，因為如果開太多層畫面會變得不好看，像是下面這樣的選單，只開一層感覺還不錯!! 如果選擇商品分類01，那基本上只會顯示商品分類01底下的商品內容，但如果商品分類01底下還有其他子分類跟商品內容就抓不到了! 這樣的區塊不是很奇怪，底層分類的商品永遠不會顯示在首頁的區塊中，只會顯示頂層的，所以解決辦法就是當USER選擇頂層分類時，連同頂層中全部的子分類中的商品內容頁通通抓出來，用隨機排列，這樣問題就解決了阿!!但是需要用到遞迴來解商品分類，再透過商品分類撈出商品頁面的ID。 方法如下 首先選單透過AJAX選單傳值過去的(分類id)，這部分就不說明了，然後以下是在AJAX中遞迴解商品分類及商品內容的方法 $dbneme="productsort"; //第一層 $where="  where `sortid` = '".$selectid."' &&  `enable` = '1'  order by  sortidsort  DESC";  //where數值 $productsortArr=databasetablewhile($dbneme,$where); //遞回開始 //分類指定sortid遞迴到底 function sortretorted($dbneme="",$sortid=""){  $where=" where `of_sortid` = '".$sortid."' order by sortidsort DESC";   //where數值 $sortArr=databasetablewhile($dbneme,$where); foreach($sortArr as $key=> $val){ $sortvar.=$sortArr[$key]['sortid'].","; $sortvar.=sortretorted($dbneme,$sortid...

網站很多功能都怕遇到user點選瀏覽器的返回上一頁功能，例如前一頁有某功能是需要購過js計算後顯示在容器中的結果數值，像是2*500=1000之類的算式，如果user點選送出後又返回上一頁，input中的數值還會保留，但容器的數值卻歸零(需要觸發計算)，如果user又從送出一次表單那寫入的數值一定不正確，最好的解決方法就是當usre返回上一頁後瀏覽器自動更新頁面(同F5)，經過許多嘗試後以下方法確實可以解決問題。 假設當前網址為 http://localhost/xoops/modules/test/index.php?op=storedvalue 如果只針對IE事情就簡單了，完全不需要動用到PHP，只需要在樣板貼上 <script type="text/javascript"> if (!!(window.history && history.pushState)){ var $time = (+new Date()); history.pushState({page: 1}, 'title 1', "?op=storedvalue&back="+$time+""); history.state } </script> 這樣進入到http://localhost/xoops/modules/test/index.php?op=storedvalue JS會以時間戳產生back變數值，例如 http://localhost/xoops/modules/test/index.php?op=storedvalue&back=1524612144000 當USER點選返回上一頁時間戳數值會改變，實際上也等於不同的頁面，頁面會更新，但很不幸的， 這方法對於Google Chrome瀏覽器一點用都沒有 ，完全不會刷新頁面...................所以為了能夠讓Google Chrome瀏覽器返回上一頁頁也能自動更新頁面，只好動用到PHP的$_SESSION功能。 方法如下： 在PHP檔案輸出time()時間戳格式 $xoopsTpl->assign( ...

用過FB的朋友一定有發現一個有趣的功能，就是在人氣旺的粉絲團留言，有時候還沒輸入完內容前面就冒出其他的人留言回覆了，但都沒刷新頁面，其實這樣功能用setInterval()+$.ajax就能實現了，也不會很消耗user端瀏覽器效能，方法如下： 要顯示資料的內容區 <div id='test'></div> 執行$.ajax的JS檔案code $(document).ready(function(){ //第一次讀取  $returntrue=cartnumber(); //自動更新 if( $returntrue ){ setInterval(function(){ cartnumber() ; }, 10000 );  //預設 10000 毫秒自動重複執行 cartnumber()函數 } function cartnumber() { $.ajax({ url: xoopsjsurl + '/modules/neillibrary/ajax.php', type: 'POST', data: { id: '1'}, success: function(response) { $('#test').html(response); }, error: function() { console.log('ajax error!'); } }) }    return true; }); 這樣#test的內容資料就會按setInterval設定的10000豪自動更新一次，若此期間有新的資料寫入ajax會自動更新區塊內容，不用刷新瀏覽頁面，很方便實用的功能!!有需要的朋友參考看看!! 教學撰寫： 徐嘉裕 Neil hsu

使用ajax非同步方式作內容編輯儲存，會發現同樣的操作次數越多，啟用程式速度越慢，最後整個程式就卡住不動了，像下面這樣的範例： 重複點選編輯 然後儲存，大概操作3次以上瀏覽器就會卡住! 解決方法只要在$.ajax加上cache，ifModified，async設定即可解決瀏覽器積存問題 function invoiceajaxbox($id,$suid,$invoiceid,$html,$receiverreturn,$list){ $.ajax({ url: xoopsjsurl + '/modules/neillibrary/ajax.php', type: 'POST', data: { id: $id, suid:$suid, invoiceid:$invoiceid, list:$list, receiverreturn:$receiverreturn }, cache:false, ifModified :true , async:false, success: function(response) { $($html).html(response); }, error: function() { console.log('ajax error!'); } }) } 加上紅字設定後 ，這樣即使用同樣操作100次瀏覽器也不會卡住，有需要的朋友參考看看!! 備註：只有在AJAX檔中呼叫的JS檔中執行的$.ajax才需要加上async:false, 啟用同步請求 教學撰寫： 徐嘉裕 Neil hsu