jQuery + zy_tmpl 模板引擎動態渲染下拉選單：JSONP 跨域獲取數據實戰

架構圖解

PHP 後端 (json.php) → JSONP 響應 → jQuery.getJSON → zy_tmpl 模板渲染 → #lc 下拉框更新

後端 PHP 生成 JSONP

 1, 'BuildingName' => 'A棟'],
    ['BuildingId' => 2, 'BuildingName' => 'B棟'],
    ['BuildingId' => 3, 'BuildingName' => 'C棟'],
];
header('Content-Type: application/javascript');
echo $_GET['jsoncallback'] . '(' . json_encode($res) . ');';

前端模板結構 (AppCan 風格)

  選擇樓群：
  

    

      
        樓名
        

          
        
      
      
        數據加載中，請稍候
      
    
  

JS 渲染邏輯

function getlq() {
    $.getJSON('https://localhost/json.php?jsoncallback=?', function(data) {
        // zy_tmpl 語法：${字段名} 對應數組對象屬性
        var tmpl = '${BuildingName}';
        
        $("#lc").html(""); // 清空 loading 選項
        // zy_tmpl(tmpl, data, count) 批量渲染
        $("#lc").append(zy_tmpl(tmpl, data, zy_tmpl_count(data)));
    });
}

// 頁面載入自動執行
$(function() { getlq(); });

zy_tmpl 關鍵點

• 語法：`${property}` 直接映射 JSON 對象屬性，支援嵌套 `${user.name}`。
• 批量渲染：第三參數 `count` 指定渲染條數，內部循環拼接字符串，比手動 `$.each` 追加快。
• AppCan 集成：`zy_slectmenu(id)` 刷新原生選單 UI，確保樣式生效。

現代替代方案對比

避坑指南

1. JSONP 回調參數名：jQuery 默認 `callback`，PHP 需讀取 `$_GET['callback']` 或統一約定 `jsoncallback`。
2. 跨域 HTTPS 混合內容：頁面 HTTPS 時接口必須 HTTPS，否則瀏覽器攔截。
3. 選項值類型：`` 字符串，JS 取值 `$('#lc').val()` 返回字符串，PHP 接收 `$_POST['lc'] 為字符串，必要時 `(int)` 轉換。