將JSON數組從PHP傳遞到JQuery不起作用

我無法訪問從PHP腳本獲取JSON數據的jquery數組。如果我在jquery中硬編碼數組，它工作正常。我檢查使用cosole.log。 nproducts和產品陣列給出相同的值。請注意，nproduct具有硬編碼值，產品從PHP腳本獲取。有人能把我放在正確的方向。由於將JSON數組從PHP傳遞到JQuery不起作用

這裏是PHP代碼

while ($row = oci_fetch_array($result,OCI_ASSOC)) { 
    $shop[$row['WH_DESCRIPTION']] = array( 
     'pic' => $row['WH_PIC'], 
     'price' => $row['WH_PRICE'] 
    ); 
} 

echo json_encode($shop);

這裏是jQuery的。如果我使用nproduct然後productsRendering函數工作正常，但如果我使用產品，然後它打印包含名稱和圖片的價值和未定義的價格。似乎產品數組在productRendering函數中沒有任何值，其中getJSON正在返回值。

<script type="text/javascript"> 
    var cart = (function ($) { 

     var productsOffset = 3, products = [], 
      nproducts = { 
       'Black T-shirt': { 
        pic: 'black-controller.png', 
        price: 15 
       }, 
       'Green T-shirt': { 
        pic: 'green-kentucky.png', 
        price: 18 
       }, 
       'Brown T-shirt': { 
        pic: 'brown-computer.png', 
        price: 25 
       } 

      }; 

     $.getJSON('shop.php', function(data) { 
       products = data; 
       console.log(data);  //showing values here 
       console.log(products); //showing values here 
       console.log(nproducts); //showing values here 
      }); 

     function render() { 
      productsRendering(); 
     }; 

     function productsRendering() { 
      var catalog = $('#catalog'), 
       imageContainer = $('</div>'), 
       image, product, left = 0, top = 0, counter = 0; 
       console.log(products); //does not have values here 
      for (var name in products) { 
       product = products[name]; 
       image = createProduct(name, product); 
       image.appendTo(catalog); 
       if (counter !== 0 && counter % 3 === 0) { 
        top += 147; // image.outerHeight() + productsOffset; 
        left = 0; 
       } 
       image.css({ 
        left: left, 
        top: top 
       }); 
       left += 127; // image.outerWidth() + productsOffset; 
       counter += 1; 
      } 
      $('.draggable-demo-product').jqxDragDrop({ dropTarget: $('#cart'), revert: true }); 
     }; 

     function createProduct(name, product) { 
      return $('<div class="draggable-demo-product jqx-rc-all">' + 
        '<div class="jqx-rc-t draggable-demo-product-header jqx-widget-header-' + theme + ' jqx-fill-state-normal-' + theme + '">' + 
        '<div class="draggable-demo-product-header-label"> ' + name + '</div></div>' + 
        '<div class="jqx-fill-state-normal-' + theme + ' draggable-demo-product-price">Price: <strong>$' + product.price + '</strong></div>' + 
        '<img src="images/t-shirts/' + product.pic + '" alt=' 
        + name + '" class="jqx-rc-b" />' + 
        '</div>'); 
     }; 

     function init() { 
      render(); 
     }; 

     return { 
      init: init 
     } 
    } ($)); 

    $(document).ready(function() { 
     cart.init(); 
    }); 
</script>

來源

2013-04-03 Aamer

***它是異步***，所以當你試圖使用這些值時，ajax函數還沒有完成，並且沒有值顯示！ – adeneo

productsRendering() Ajax請求完成之前被調用。考慮在ajax回調中調用productsRendering()。

來源

2013-04-03 17:48:54 pfyod

謝謝@pfyod。得到它運行 – Aamer

我怎樣才能延遲對productRendering（）的調用，以便它只在ajax回調完成後纔會執行。 – Aamer

這是因爲瀏覽器不會將響應正文解釋爲JSON。嘗試呼應響應之前設置Content-Type頭部在PHP中：

header('Content-Type', 'application/json');

來源

2013-04-03 17:48:23 Struchu

這不是要求。 jQuery將採用返回的文本並假設它是JSON，因爲他使用'getJSON'。儘管如此，使用它並不是一個壞主意。 –

將JSON數組從PHP傳遞到JQuery不起作用

回答

相關問題