您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

ThinkPHP 結合 jQuery AJAX 接收 JSON 資料完整實作

編輯：PHP 綜合知識

前端：jQuery AJAX 請求

在視圖中引入 jQuery，並撰寫通用 AJAX 函式。注意 ThinkPHP 模板常數（如 __URL__）無法直接在 JS 中解析，需先指定給變數。

function ajax(id, pic) {
    var URL = '__URL__'; // 當前控制器地址
    $.ajax({
        url: URL + '/returnAjax/id/' + id,
        type: 'GET',
        dataType: 'text',   // 後端直接 echo 字串，故這裡用 text
        timeout: 1000,
        error: function() {
            alert('Error loading XML document');
        },
        success: function(data) {
            writeHtml(data, pic);
        }
    });
}

function writeHtml(data, pic) {
    var product = eval('(' + data + ')'); // 轉為 JSON 物件
    $("#cate_pic").attr("src", "../images/" + pic);
    $("#product_pic").attr("src", "../Attachments/product/" + product.attachpath + "/" + product.attachthumb);
    $("#product_subject").html(product.subject);
    $("#product_content").html(product.content);
}

後端：控制器輸出 JSON

在 Product.class.php 中定義 returnAjax 方法，使用 json_encode 將模型資料轉為 JSON 字串並直接輸出。

public function returnAjax() {
    $id = $_GET['id'];
    $Product = D('Product')->where('id=' . $id)->find();
    // 直接輸出 JSON 格式資料集
    echo json_encode($Product);
}

回傳資料結構範例

{
    "id": "9",
    "userid": "1",
    "cid": "10",
    "subject": "1111",
    "color": "",
    "spec": "",
    "size": "",
    "keywords": "",
    "content": "<p>1111</p>",
    "meno": "1111",
    "attachpath": "200903",
    "attachment": "49d1d86e68d31.png",
    "attachthumb": "49d1d86e68d31_thumb.png"
}