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

问题描述：

http://alpha.ripfy.com/

As seen in the following demo, I have a YouTube video that I want to be able to play while adding items to the array in PHP. Sadly, this isn't possible from what I've tried because the page refreshes every time I add an item to the array.

Would there be any way of achieving this without the page refreshing (forcing the video to restart?)

Code:

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

Thanks for helping me out!

http： //alpha.ripfy.com/ p>

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

如果没有页面刷新，是否有任何方法可以实现此目的（强制视频重新启动？） p>

代码： strong> p>

 ＆lt;？php 
 if（  isset（$ _ POST ['playlist']））{
 $ playlist = $ _POST ['playlist']; 
} else {//设置我的默认列表
 $ playlist = array（“Be more.mp3”  ，“Drift Away.mp3”，“Panda Sneeze.mp3”）; 
} 
 
 if（isset（$ _ POST ['name1']））{
 $ playlist [] = $ _POST ['name1'  ]; 
} 
？＆gt; 
 
＆lt; form method =“post”＆gt; 
 
＆lt;？php 
 foreach（$ playlist as $ song）{
？＆gt; 
 
＆lt;  ; input type =“hidden”name =“playlist []”value =“＆lt;？php echo $ song？＆gt;”＆gt; 
 
＆lt;？php 
} 
？＆gt; 
 
＆lt;  input type =“text”name =“name1”/＆gt; 
＆lt; input type =“submit”name =“submit1”/＆gt; 
＆lt; / form＆gt; 
 
＆lt; iframe width =“560”height =  “315”src =“https://www.youtube.com/embed/pzB6CxChIQk”frameborder =“0”allowfullscreen  ＆gt;＆lt; / iframe＆gt; 
 
＆lt;？php 
 foreach（$ playlist as $ value）{
 echo $ value。“＆lt; br＆gt;”; 
} 
？＆gt; 
  代码>  pre> 
 
 感谢您帮助我！ p> 
  div>

答

Here's my answer. That fully works. In this script, the server checks the presence of a name1 request (post or get). If exists, it returns the string posted (only) and if doesn't, it returns what already was there. And the post() method posts (gets) the data and appends to the container using innerHTML+= data + "<br>"; evaluate the code, it should be self explanatory.

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

Although, it works as intended, i don't see the point of using it. just plain js should work

答

You have to send your form using Ajax, eg. via jQuery.post() method.

After that you have to reload your container with list or add new item there with JavaScript.

答

Try using the $.post and $.get JQuery methods. One method might be to $.post back to a .php page that renders a container of html, then use $.get to retrieve just that html container and insert into the DOM.

答

if you need that these information be storaged in database or anything on server sider don't use the convencional form post, use AJAX with JQuery.

First create a div(container)to render the list content where you need the information apears:

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

Then create a page(i.e. page.ajax.php) that will treat your request. If you need you can put the information in a database or anything you want by this page. This page must return the content you want to render.

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);
    });
});

If you just need to show what you wrote on text input instead of storage or treat the information, you may just use JQUERY to render the information in the container you created.

$('#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);
});

Take a look here to see the sencond option:

https://jsfiddle.net/wqLf65ox/

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

相关推荐