将PHP数组传递给Javascript没有显示在源

时间:2016-02-10 23:12:27

标签: javascript php mysql arrays ajax

我正在处理一个包含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做一切吗?

谢谢,Eric

编辑:我想要做的是将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;

认为它会传入主文件,但事实并非如此。

1 个答案:

答案 0 :(得分:3)

原则上,您可以通过两种方式来考虑使用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字符串之外,你没有echoprint

您的数据库查询也会出现在这个新文件中。请注意,目前你有一个混合,就像这一行:

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 and U+2029 PARAGRAPH SEPARATOR在引用的字符串中显示未转义:

  • JSON语法允许此,如ECMAScript® 2015 Language Specification, section 24.3.1中所述:

      

    JSON允许Unicode代码点U+2028U+2029直接出现在 String 文字中,而不使用转义序列。

  • JavaScript语法允许此,如ECMAScript® 2015 Language Specification, section 11.8.4所示:

      

    除了结束引号代码点U+005C (REVERSE SOLIDUS)U+000D (CARRIAGE RETURN)U+2028 (LINE SEPARATOR)U+2029 (PARAGRAPH SEPARATOR)和{{1}之外,所有代码点都可以字面上显示在字符串文字中}。任何代码点都可以以转义序列的形式出现。

然而,

PHP的U+000A (LINE FEED)遵循最后一行提供的可能性,并且转义所有非ASCII字符,包括有问题的json_encodeU+2028,除非您明确告诉PHP < em> not 使用JSON_UNESCAPED_UNICODE flag

进行此操作
  

U+2028 (整数)

     
      
  • 从字面上对多字节Unicode字符进行编码(默认为以\ uXXXX转义)。从PHP 5.4.0开始提供。
  •   

因此,没有此标志的JSON_UNESCAPED_UNICODE调用将不会产生此问题的实例。

3。捕获json_encode失败

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

  

成功时返回JSON编码的字符串,失败时返回 FALSE

当发生这种情况时json_encode将输出空字符串,即invalid JSON

应该在PHP中捕获此错误情况,例如:

echo json_encode($result)

然后在JavaScript中,也应该处理这种情况,例如:

<?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"}';
    }
}
?>