Question

http://alpha.ripfy.com/

如下面的演示所示，我有一个YouTube视频，我希望能够在PHP中向数组中添加项目时播放。遗憾的是，从我尝试的内容来看，这是不可能的，因为每次我向数组添加项目时页面都会刷新。

如果没有刷新页面（迫使视频重新启动？），有没有办法实现这一目标？

代码：

<?php
    if (isset($_POST['playlist'])) {
        $playlist = $_POST['playlist'];
    } else { // Else set my default list
        $playlist = array("Be more.mp3", "Drift Away.mp3", "Panda Sneeze.mp3");
    }

    if (isset($_POST['name1'])) {
        $playlist[] = $_POST['name1'];
    }
?>

<form method="post">

<?php
    foreach($playlist as $song) {  
?>

<input type="hidden" name="playlist[]" value="<?php echo $song?>">

<?php
    }
?>

<input type="text" name="name1"/>
<input type="submit" name="submit1"/>
</form>

<iframe width="560" height="315" src="https://www.youtube.com/embed/pzB6CxChIQk" frameborder="0" allowfullscreen></iframe>

<?php
    foreach ($playlist as $value) {
        echo $value."<br>";
    }
?>

感谢您帮助我！

Answer 1

如果您需要将这些信息存储在数据库中，或者服务器端的任何内容都不使用常规表单，请使用AJAX和JQuery。

首先创建一个div（容器）来呈现您需要信息的列表内容：

<div id="list_musics"></div>

然后创建一个页面（即page.ajax.php）来处理您的请求。如果需要，您可以将信息放在数据库或本页所需的任何内容中。此页面必须返回您要呈现的内容。

<强> HTML：

<input type="button" id="ajaxcaller">

<强> JQUERY：

$('#ajaxcaller').on('click', function(){
    //AJAX CALL WITH POST METHOD
    var text = $('input[name=name1]').val();
    $.post(page.ajax.php,text,function(data){
        //Render your content in the container created on HTML
        $("#list_musics").html(data);
    });
});

如果您只需要显示您在文本输入而不是存储上写的内容或处理信息，您可以使用JQUERY在您创建的容器中呈现信息。

$('#ajaxcaller').on('click', function(){
    //AJAX CALL WITH POST METHOD
    var text = $('input[name=name1]').val();
    // PUT THE TEXT RIGHT AFTER THE CONTENT THAT ALREADY EXISTS IN THE CONTAINER
    $("#list_musics").append(text);
});

看看这里的第二个选项：

https://jsfiddle.net/wqLf65ox/

Answer 2

这是我的答案。这完全有效。在此脚本中，服务器检查是否存在name1请求（post或get）。如果存在，则返回已发布的字符串（仅），如果不存在，则返回已存在的字符串。 post（）方法发布（获取）数据并使用innerHTML+= data + "<br>";附加到容器评估代码，它应该是自我解释的。

<?php
if (isset($_REQUEST['playlist'])) {
    $playlist = $_REQUEST['playlist'];
} else { // Else set my default list
    $playlist = array("Be more.mp3", "Drift Away.mp3", "Panda Sneeze.mp3");
}

if (isset($_REQUEST['name1'])) {
   // if exists, return plain text responce. NOT HTML
    $playlist[] = $_REQUEST['name1'];
    echo $_REQUEST['name1'];
}
else{

?>
<html>
<head>
<title>Demo</title>
<script src="jquery.js"></script>

</head>
<body>

<script>
text= ""

function onUpdate(){
    text = document.getElementById("name1").value;
}

function handler(data){
     document.getElementById('container').innerHTML += data+"<br>";
}

function post(){
    onUpdate();
    $.get("index.php", name1="+text, handler);
 }
</script>

<input type="text" name="name1" id="name1"/>
<input type="submit" name="submit1" onclick="post()"/>

<iframe width="560" height="315" src="https://www.youtube.com/embed/pzB6CxChIQk" frameborder="0" allowfullscreen></iframe>
<br>
<div id="container">
<?php
    foreach ($playlist as $value) {
        echo $value."<br>";
    }
?>
</div>
</body>
<?php  };?>

虽然它按预期工作，但我没有看到使用它的意义。只是简单的js应该工作

Answer 3

您必须使用Ajax发送表单，例如。通过jQuery.post()方法。

之后，您必须使用列表重新加载容器，或使用JavaScript添加新项目。

Answer 4

尝试使用$ .post和$ .get JQuery方法。一种方法可能是$ .post回到一个.php页面，该页面呈现一个html容器，然后使用$ .get来检索该html容器并插入到DOM中。

添加项目到数组而不刷新页面？

4 个答案: