Question

我正在尝试使用数组列表中的预填充数据每秒创建一个新的div。

fields.php：

<?php

$file = fopen('names.csv', 'r');
while (($line = fgetcsv($file)) !== FALSE) {
  //$line is an array of the csv elements
    $names = $line;
    echo $names[array_rand($names)];
}
fclose($file);

?>

JS：

<script>
function createName(){
    var feedback = $.ajax({
        type: "POST",
        url: "fields.php",
        async: false
    }).complete(function(){
        setTimeout(function(){get_fb_complete();}, 1000);
    }).responseText;

    $('.content').html(feedback);
}

$(function(){
    createName();
});
</script>

我希望用数组中的数据创建Div：

    <div class="content">

    <div class="col-1">

    <div class="profile-bg">
    <div class="inside-profile">
    <img src="img/avatars/avatar1.jpg" class="img-circle" border="0"></img>
    </div>
    </div>

    </div>

    <div class="col-2">
        <div class="details">
    <p style="font-size: 18px;"> ==*I want to show an ARRAY here.== </p>
    <p class="details-desc"> ==*(TIMESTAMP, something like: 1m to show when this div was created)== </p>
    </div>
    </div>

    <div class="col-3">
    <img src="img/userImg/userImg1.jpg" class="viewed-img" border="0"></img>
    </div>
</div>
<div class="col-4">
<div class="seperator"></div>
</div>

</div>

如何将fields.php中创建的每个ARRAY转换为.content DIV？

Answer 1

首先，你必须从php端以JSON格式打印值

<?php

$file = fopen('names.csv', 'r');
$data = [];
while (($line = fgetcsv($file)) !== FALSE) {
  //$line is an array of the csv elements
    $names = $line;
    $data[] = $names[array_rand($names)];
}
fclose($file);
echo json_encode($data);

?>

假设值为a，b，c，则会打印["a","b","c"]

在js我们将解析这些值并迭代它

<script>
function createName(){
    var feedback = $.ajax({
        type: "POST",
        url: "fields.php",
        async: false,
        success: function(data)
        {
            // parse json 
            data = JSON.parse(data);
            // add them in divs
            for ( var i = 0 ; i < data.length ; i++ )
            {
                // create the required format - you can do the same with createElement and assign class also
                var item_code = "<div class='content'>"+data[i]+"</div>";
                $("#container_p").append(item_code);
            }
        }
    }).complete(function(){
        setTimeout(function(){get_fb_complete();}, 1000);
    }).responseText;

    $('.content').html(feedback);
}

$(function(){
    createName();
});
</script>

最后一件事是HTML部分只是为容器p添加id

    <div class="content">

    <div class="col-1">

    <div class="profile-bg">
    <div class="inside-profile">
    <img src="img/avatars/avatar1.jpg" class="img-circle" border="0"></img>
    </div>
    </div>

    </div>

    <div class="col-2">
        <div class="details">
    <p style="font-size: 18px;" id="container_p"></p>
    <p class="details-desc"> ==*(TIMESTAMP, something like: 1m to show when this div was created)== </p>
    </div>
    </div>

    <div class="col-3">
    <img src="img/userImg/userImg1.jpg" class="viewed-img" border="0"></img>
    </div>
</div>
<div class="col-4">
<div class="seperator"></div>
</div>

</div>

Answer 2

您的PHP文件必须更改，以便在每次ajax调用时只为您提供一行文件。（从Amr Magdy回答他的JS和HTML）

有两种方法：

一个。您创建一个充当计数器的SESSION变量。在每次PHP调用时，计数器都会增加，PHP文件会从文件中获取特定的行。

B中。您创建一个局部变量（在JS文件中）充当计数器并将其发送到PHP文件，该文件使用它从文件中获取特定行。

这是A（.php部分 - JS是相同的）：

<?php
session_start();
if (!isset($_SESSION["line_counter"]))
  $_SESSION["line_counter"]=0;

$file = fopen('names.csv', 'r');
$counter=0;
$done = FALSE;

while (($line = fgetcsv($file)) !== FALSE && !$done) {
  //$line is an array of the csv elements
  if ($counter == $_SESSION["line_counter"]) {
    $names = $line;
    $data[] = $names[array_rand($names)];
    echo json_encode($data);
    $done=TRUE;
    $_SESSION["line_counter"]++;
  }
  $counter++;
}
fclose($file);
?>

这是B（.php部分）：

<?php
// check $_POST
$line_counter=0;
if (isset($_POST["line_counter"]) && is_numeric($_POST["line_counter"]))
    $line_counter=inval($_POST["line_counter"]);

$file = fopen('names.csv', 'r');
$counter=0;
$done = FALSE;

while (($line = fgetcsv($file)) !== FALSE && !$done) {
  //$line is an array of the csv elements
  if ($counter == $line_counter) {
    $names = $line;
    $data[] = $names[array_rand($names)];
    echo json_encode($data);
    $done=TRUE;
  }
  $counter++;
}
fclose($file);
?>

（您还需要更改B的JS文件）：

创建一个全局变量（var line_counter）;
在每次ajax调用时发送line_counter
在每次成功回复时增加line_counter

使用AJAX每秒显示一个新的DIV foreach数组

2 个答案: