將PHP數組傳遞給Javascript，無需在源代碼中顯示

Question

我正在開發一個包含2000多張照片的歷史數據庫，這些照片需要分類，其中大約有250張已加載。 我創建了一個包含26個字段的MYSQL數據庫來保存這些數據。

我正在使用PHP訪問數據庫並檢索信息。

我想使用JavaScript來管理表單的其余部分。 所有代碼都在一個php文件中。

我遇到的問題是我

//$result is the php associative array holding the photo information

<div id="dom-target" style="display: none;">
     <?php echo json_encode($result); ?>
</div>
<script>
    var div =document.getElementById("dom-target");
    var photo_array = JSON.parse(div.textContent);  

它工作但是，我得到了源html輸出中嵌入的整個數據庫結構和數據。 顯然，隨着照片數量的增加，這不會特別有效。

我怎么能阻止這個？

如果我將這個php文件分成兩個，一個包含php訪問數據庫並返回一個數組，另一個包含所有輸入框等，並使用AJAX將數組作為JSON傳遞; 那會有用嗎？ 我不想走這條路，除非它會成功。 如果所有代碼都在一個頁面上，我已經讀過你無法傳遞數組的地方。

或者，我應該堅持用PHP做一切嗎？

謝謝，埃里克

編輯：我想要做的是將php數組傳遞給js， 而不必將數組中的所有數據都包含在源代碼中。 從源頭來說，我的意思是當某人“觀看來源”。 我還認為，一旦我拍攝了2000張照片就會變得笨重......（2000張照片）x（26個字段）=網頁中不必要地包含了很多東西。

我不反對使用AJAX。 但是我見過的所有例子都在一個頁面上有請求而在另一個頁面上有響應。 我是否需要將代碼分成兩頁; 一個處理php和MySQL，另一個處理html和js？

我想象的是一個屏幕，顯示800x600的所選照片，輸入字段低於該值。 一個人輸入標題，標題，描述等，並使用照片的名稱保存在數據庫中。 在下面我會有20張縮略圖照片，一個人可以從中選擇輸入該照片的信息。 我會一次循環數據庫20左右，照片。 只有文件名存儲在數據庫中，實際的照片jpg存儲在硬盤上並通過語句檢索。

如果數據庫陣列中的所有數據都不在html源頁面上，我怎么能這樣做呢？

編輯2 ：我被要求包含更多我的PHP。 對不起，我不能整理。

<?php
$stmt_select->bind_result(
     $select_array['fhs_pkey'], 
     $select_array['file_name'],
     $select_array['caption'],  
     $select_array'post'],
     $select_array['photo_type'], 
     $select_array['last_name'], 
     $select_array['first_name'], 
     $select_array['middle_name'], 
     $select_array['honorific'], 
     etc., etc., etc
);

// put all of the database info into an array. Filename field is for full size photos
$j=$stmt_select->num_rows;
for ($i=0;$i<$j;$i++)
{
    $stmt_select->data_seek($i);
    $row = $stmt_select->fetch();
    //put all of the column data into the array
    foreach ($select_array as $key=>$value)                   
        $result[$i][$key]=$value;

    //in a separate php file resize the photos and save them
    //put full path with appended filename to retrieve later                  
    $result[$i]['resized'] = 
        "../images/fhs_images/800x600_photos/800x600--" .
        $result[$i]['file_name'] ;
    $result[$i]['thumb'] = "../images/fhs_images/200x150_photos/200x150--" .
        $result[$i]['file_name'] ;

} 
$stmt_select->close();
$stmt_update->close();
$stmt = null;
$conn = null;

echo '<figure id="photo_figure">';
$filename = $result[2]['resized'];
echo "<img src = "."'".$filename."'" ."/>";

?>

<script>
//below is where I get the entire array printed out when I view source          
var photo_array = <?php echo json_encode($result); ?>      
var testing = photo_array[40]['thumb'];
//take care of spaces in filenames
testing = encodeURI(testing)

document.write('<img src=' + testing + '>')
</script>                 

編輯3 @trincot

有些東西不對。 我將所有MYSQL數據庫設置和檢索都移動到一個名為fhs_get_photos.php的新文件中。 在我的jQuery ready函數中，我添加了以下內容。 查看我對顯示內容的評論

var myarray;
$(document).ready(function()
{
$('.tooltips').powerTip();

$(".radio1").on('click',(function()
    {
        var photo_type = $("input[name='photo_type']:radio:checked").val();
        if(photo_type == 2)
            $(".person").hide();
        else
            $(".person").show();

    }));


 $.getJSON("fhs_get_photos.php", function(photo_array)
 {
    if (photo_array.jsonError !== undefined) 
    {
      alert('An error occurred: ' + photo_array.error);
      return;
    }

    // photo_array now contains your array. 
    // No need to decode, jQuery has already done it for you.
    // Process it (just an example)
    //$.each(photo_array, function(i, obj){
    //    $("#dom-target").append(obj.fhs_pkey + " " + obj.file_name + ", ");

//this displays correctly on a screen but not with anything else.
//Seems as if it's rewriting the page and only this is displaying which 
//may be how it's supposed to go
document.write("In js. photo_array 2,caption is: " + photo_array[2]     ['caption']);   
    });

});

在我的主要PHP我把

       document.write("photo_array 2,caption is: " + photo_array[2]['caption']);    

但它沒有顯示任何東西。 我懷疑photo_array沒有被傳遞到頁面中。 在js文件中，我創建了一個全局變量'myarray'並在我添加的.getJason函數中

 myarray = photo_array;

認為它將傳遞到主文件但它沒有。

Answer 1

原則上有兩種方法可以考慮在JavaScript中獲取數據：

1. Ajax請求

使用此解決方案，使用當前的PHP文件僅生成HTML頁面，因此無需生成JSON，並創建另一個僅生成JSON的PHP文件。

因此，假設您生成JSON的PHP文件名為fhs_get_photos.php ，那么它將具有此代碼（沒有HTML！）：

<?php
header("Content-Type: application/json");

// Collect what you need in the $result variable.
// ...
// and then:

echo json_encode($result);

?>

請參閱我的答案中的最后一節來處理JSON編碼錯誤。

確保在打開<?php之前沒有換行符或空格，並且除了那個JSON字符串之外，你不會echo或print任何其他內容。

您的數據庫查詢也將在此新文件中。 請注意，目前你有一個混合，就像這一行：

echo "<img src = "."'".$filename."'" ."/>";

此行屬於非JSON文件，但它也取決於查詢。 因此，要么創建一個包含文件來執行查詢，將它包含在兩個PHP文件中，要么將定義圖像標記（或至少圖像的源代碼）的邏輯移動到JavaScript部分（更好！）。

然后在原始的PHP文件中，刪除JSON輸出，並使用jQuery添加一些JavaScript（我知道你已經在使用它了，所以你把它包括在內）：

$(function(){
    $.getJSON("fhs_get_photos.php", function(photo_array){
        // photo_array now contains your array. 
        // No need to decode, jQuery has already done it for you.
        // Process it (just an example)
        $.each(photo_array, function(i, obj){
            $("#dom-target").append(obj['fhs_pkey'] + " " + obj['file_name'] + ", ");
        });
        // or things like:
        $("#caption_input").val(photo_array[2]['caption']);
    });
}); 

一旦構建了HTML DOM，這個函數就會被執行，所以在第一個PHP文件完成執行之后就顯然了。 它將向第二個PHP文件發出請求。 一旦PHP回答了該請求，內部回調函數將接收數據。 請注意，這里不需要解碼JSON，因為jQuery已經為您完成了。

2.使用數據生成JavaScript

在這里，您保留當前的PHP文件，但將注入JSON編碼數據的部分移動到JavaScript塊：

    <script>
        var photo_array = <?php echo json_encode($result); ?>;
        // ... process it
    </script>

無需在JavaScript字符串中包裝JSON然后解析它。

來自json.org ：

JSON是JavaScript的對象文字符號的子集。 由於JSON是JavaScript的一個子集，因此可以在語言中使用它而不會有任何麻煩或麻煩。

2.1。 有效的JSON可能是無效的JavaScript？

雖然在這個問題的上下文中沒有問題（見下文），但JSON和JavaScript語法之間存在不兼容性。 它涉及是否允許非ASCII字符U+2028 LINE SEPARATOR和U+2029 PARAGRAPH SEPARATOR在引用的字符串中顯示未轉義：

• JSON語法允許這樣做 ，如ECMAScript®2015語言規范第24.3.1節所述 ：

  JSON允許Unicode代碼點U+2028和U+2029直接出現在字符串文字中，而不使用轉義序列。

• JavaScript語法不允許這樣 ，因為在所指示的ECMAScript®2015語言規范，部分11.8.4 ：

  除了結束引號代碼點， U+005C (REVERSE SOLIDUS) ， U+000D (CARRIAGE RETURN) ， U+2028 (LINE SEPARATOR) ， U+2029 (PARAGRAPH SEPARATOR)之外，所有代碼點都可以按字面意思顯示在字符串文字中，和U+000A (LINE FEED) 。 任何代碼點都可以以轉義序列的形式出現。

然而，PHP的json_encode遵循最后一行提供的可能性，並且轉義所有非ASCII字符，包括有問題的U+2028和U+2028 ，除非您明確告訴PHP 不要使用JSON_UNESCAPED_UNICODE標志 ：

JSON_UNESCAPED_UNICODE （整數）

• 從字面上對多字節Unicode字符進行編碼（默認為以\\ uXXXX轉義）。 從PHP 5.4.0開始提供。

因此， 沒有此標志的json_encode調用將不會產生此問題的實例。

3.捕獲json_encode失敗

根據json_encode上的手冊，該方法可以返回非字符串（ false ）：

成功時返回JSON編碼的字符串，失敗時返回FALSE 。

當發生這種情況時， echo json_encode($result)將輸出空字符串，這是無效的JSON 。

應該在PHP中捕獲此錯誤情況，例如：

<?php
header("Content-Type: application/json");

// Collect what you need in the $result variable.
// ...
// and then:

$json = json_encode($result);
if ($json === false) {
    $json = json_encode(array("jsonError", json_last_error_msg()));
    if ($json === false) {
        // This should not happen, but we go all the way now:
        $json = '{"jsonError": "unknown"}';
    }
}
?>

然后在JavaScript中，也應該處理這種情況，例如：

if (photo_array.jsonError !== undefined) {
    alert('An error occurred: ' + photo_array.jsonError);
    return;
}