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

【问题标题】：Add items to array without refreshing the page?将项目添加到数组而不刷新页面？
【发布时间】：2015-09-15 16:52:13
【问题描述】：

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

感谢您帮助我！

【问题讨论】：

您没有收到任何错误吗？你不把分号放在 ; ?>
不，没有错误 - 演示按预期工作，但感谢您指出这一点！
当页面加载（或使用 ajax 内容）时，PHP 在页面上显示内容。当页面已经加载时，我看不到添加到 PHP 数组的好处。也许你真正想做的是在页面上显示一个额外的输入？

标签： php jquery arrays forms

【解决方案1】：

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

首先创建一个 div(container) 来渲染列表内容，在你需要信息的地方出现：

<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/

【讨论】：

【解决方案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应该可以工作

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：