謝晒的PHP網頁設計

在前後端互動的網頁應用中，常見需求是後端 PHP 傳送資料陣列到前端，再由 jQuery 判斷使用者輸入的值是否存在。以下是簡單實作方式。 1. PHP 將陣列轉為 JSON <?php $arr_list = array("S0001", "S0002", "S0003"); $json_list = json_encode($arr_list); ?> <script> var erpidArray = <?php echo $json_list; ?>; </script> 說明： 使用 json_encode() 將 PHP 陣列轉成 JavaScript 可讀的 JSON 格式。如果$arr_list是空陣列也沒關係，因為json_encode會將空陣列轉成[]，這對前端來說也是空陣列的意思，在JS的部分不會報錯。 2. jQuery 判斷值是否存在 var userInput = 'S0002'; if ($.inArray(userInput, erpidArray) > -1) { alert("存在於陣列中！"); } else { alert("不存在於陣列中。"); } 補充： 如果要判斷找不到的情形 可以用 if ($.inArray(userInput, erpidArray) === -1) { 。

$.ajax({   url: "ajax.php",   type: "post",   success: function(data) {     exportToExcel(data);   } }); function exportToExcel(htmlTable) {   // 定義Excel MIME類型   const mimeType = 'application/vnd.ms-excel';   // 將HTML表格轉為Blob   const blob = new Blob(     [htmlTable],     { type: mimeType }   );   // 建立下載連結   const link = document.createElement('a');   link.href = URL.createObjectURL(blob);   link.download = 'data.xls'; // 檔案名稱   document.body.appendChild(link);   // 觸發下載   link.click();   // 移除連結   document.body.removeChild(link); }

jQuery Tooltip 的提示視窗很好用，如果內容文字包含很常的英數字串，就會讓字串跑到視窗外，此時可以使用修改CSS屬性的方法進行調整...

之前寫過利用 JSONP 達成跨域抓資料的文章 ( 連結在此 )，今天來介紹另一種跨域抓資料的方式 CORS，這個方式也是 W3 推薦的，使用方法很簡單...

後端 php: (my.php) $arr = array(); //查詢資料的過程(略) 假設查不到任何資料 所以 $arr 仍然是一個空陣列 echo json_encode($arr, JSON_FORCE_OBJECT);  //第二個參數是強制使用JSON格式 前端 js: $.ajax({   url:"my.php",   dataType:"json",   success: function(data) {     //使用下列程式碼 檢查 data 是否為空     if (Object.keys(data).length > 0) {         //do something     }   } }); 說明： json 無法直接取到長度 (length) 來判斷內容是否為空，所以改成抓 json 的 key 長度來判斷。

Multiple Select

之前介紹過 Javascript 使用 JSONP 的方法 連結在此 ，此篇介紹 jQuery 使用 JSONP 的方法，非常簡單喔...

Chosen 使用方式 <script src="jquery.min.js"></script> <script src="chosen.jquery.min.js"></script> <script>     $("select[name='myselect']").chosen(); </script> 備註： 清除已選選項 $("select[name='myselect']").trigger("chosen:updated");

jQuery UI Tooltip 的 官網範例 基本上只要加上下面語法，title 的顯示方式就會自動變成 tooltip 的視窗，非常方便。 $("#my_title").tooltip(); 但是當我們有需要將視窗中的文字換行時，直接在title裡加<br>是無效的，需要調整一下語法，如下： $("#my_title").tooltip({   content: function() {     return $(this).attr('title');   } });

HTML的部分： <input type="radio" name="test" value="1">1 <input type="radio" name="test" value="2">2 <input type="radio" name="test" value="3">3 JS的部分： $("input[name='test'][value='1']").prop("checked", true).trigger("click");

$("input[name='mycheckbox[]']").click(function() {     $("input[name='mycheckbox[]']").not(this).removeAttr("checked"); });

在 IE8 或 相容性檢視 下 使用 .append() 會有問題 請改用 .after() 參考

input 的 type="hidden"、或 jQuery 使用 hide()、或 CSS 賦予 display:none， 在 submit 後，還是會將值傳出，如果不想收到值，需要加上 disabled。 備註： type="hidden"、hide()、display:none 這三個行為都是將 css 的 display 值設為 none 範例

W3官網 範例： $ ( window ) .on ( "load" , function () {   $ ( "#mydiv" ) .css ( { "display" : "none" } ) ; } ) ; 也可以使用下列語法 $(document).ready(function() {   $ ( "#mydiv" ) .css ( { "display" : "none" } ) ; }); 差別在於 如果需要在所有資源（包括圖片和外部資源）完全載入後才執行任務，使用 $(window).on("load", function() { ... });。 如果只需要在 DOM 結構載入並解析完成後就執行任務，使用  $(document).ready(function() { ... });。 一般情況下，$(document).ready(function() { ... }); 更常用，因為大部分操作只需在 DOM 準備好後就可以執行。(較快觸發)

方法： css({"propertyname":"value","propertyname":"value",...}); 實作： $("p").css({"background-color":"yellow","font-size":"200%"});

$("input[name='myinput[]']").each(function() { var new_var = $(this).val().replace(/"/ig, '`').replace(/'/ig, '`'); $(this).val(new_var); }); 

HTML code 如下: <input type="radio" name="no" value="1">1<br> <input type="radio" name="no" value="2">2<br> <input type="radio" name="no" value="3">3<br> <button type="button" id="btn">選取2</button> jQuer code 如下:

inArray() 簡體中文說明 短摘： 1. 搜尋不到時，回傳 -1。 2. 因為是採用嚴格比對，所以 數字 10 是比對不到 字串 '10' 的。

jQuery 官網 介紹 相關屬性可看 此篇中文介紹 直接看程式碼 jQuery 部分： $("#mydiv").accordion({   collapsible: true,   active: false }); HTML 部分： <div id="mydiv">   <h3>點我收合</h3>   <div>內容</div> </div> 是不是很簡單阿～ 備註： collapsible 預設是 false 代表預設展開，改成 true 代表預設關閉。 active 預設是0 代表預設展開第一個 penel，改成 false 代表不展開任何 penel。

Jquery Difference .html(“”) vs .empty() 短摘： 基本上都是清除 html tag 裡面的內容。 .empty() 比較快。 結論：用 .empty()