javascript - 将 PHP 数组传递给 Javascript w/o 显示在源代码中

Question

我正在处理一个包含 2,000 多张照片的历史数据库，这些照片需要分类，其中约 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 而不将数组中的所有数据都包含在来源。按来源，我的意思是当有人“查看来源”时。我还认为，一旦我获得多达 2,000 张照片将变得笨拙....(2,000 张照片)x(26 个字段)= 网页中包含很多不必要的内容。

我不反对使用 AJAX。但是我见过的所有示例都在一页上有请求，在另一页上有响应。我需要将我的代码分成两页吗？一个处理 php 和 MySQL，另一个处理 html 和 js？

我设想的是一个以 800x600 分辨率显示所选照片的​​屏幕，屏幕下方是输入字段。一个人输入标题、标题、描述等，并将其与照片名称一起保存在数据库中。在此之下，我将有 20 张缩略图照片，人们可以从中挑选并输入该照片的信息。我会循环遍历数据库 20 左右，一次照片。只有文件名存储在数据库中，实际照片 jpg 存储在硬盘上并通过语句检索。

如果数据库数组中的所有数据都在 html 源页面上，我该如何做到这一点？

编辑 2:我被要求包含更多我的 php.ini 文件。对不起，我不能让它更整洁。

<?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 就绪函数中，我添加了以下内容。查看我对显示内容的评论

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 ，而且你不echo或 print除了那个 JSON 字符串之外的任何其他内容。

您的数据库查询也将在这个新文件中。请注意，目前您有一个组合，例如这一行:

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 文件，但将您注入(inject) JSON 编码数据的部分移动到 JavaScript block :

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

无需将 JSON 包装在 JavaScript 字符串中再进行解析。

来自 json.org :

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

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

虽然在这个问题的上下文中不是问题(见下文)，但 JSON 和 JavaScript 语法之间存在不兼容性。它涉及非ASCII字符 U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR 是否存在。允许在带引号的字符串中显示为未转义:

• JSON 语法允许这样做，如 ECMAScript® 2015 Language Specification, section 24.3.1 中所述:

  JSON allows Unicode code points U+2028 and U+2029 to directly appear in String literals without using an escape sequence.

• JavaScript 语法不允许允许这样做，如 ECMAScript® 2015 Language Specification, section 11.8.4 中所示:

  All code points may appear literally in a string literal except for the closing quote code points, U+005C (REVERSE SOLIDUS), U+000D (CARRIAGE RETURN), U+2028 (LINE SEPARATOR), U+2029 (PARAGRAPH SEPARATOR), and U+000A (LINE FEED). Any code points may appear in the form of an escape sequence.

PHP 的 json_encode然而，遵循最后一行提供的可能性，并转义所有非 ASCII 字符，包括有问题的 U+2028和 U+2028 ，除非您明确告诉 PHP 不要使用 JSON_UNESCAPED_UNICODE flag 这样做:

JSON_UNESCAPED_UNICODE (integer)

• Encode multibyte Unicode characters literally (default is to escape as \uXXXX). Available since PHP 5.4.0.

所以，一个 json_encode在没有此标志的情况下调用 不会产生此问题的实例。

3。 catch json_encode失败

根据manual on json_encode 该方法可以返回一个非字符串 (false):

Returns a JSON encoded string on success or FALSE on failure.

发生这种情况时 echo json_encode($result)将输出空字符串，即invalid 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;
}