dongsong4418
2015-09-15 16:52 阅读 31

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

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!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

4条回答 默认 最新

  • 已采纳
    douluo1330 douluo1330 2015-09-15 18:47

    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

    点赞 评论 复制链接分享
  • dtbam62840 dtbam62840 2015-09-15 16:54

    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.

    点赞 评论 复制链接分享
  • doushang4293 doushang4293 2015-09-15 17:34

    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.

    点赞 评论 复制链接分享
  • dsgo31121 dsgo31121 2015-09-15 18:00

    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/

    点赞 评论 复制链接分享

相关推荐