Question

我正在设计一个视频专辑。我想使用ajax将变量传递给我的php文件，这样当我点击下一个箭头时，下一个视频就可以播放了。我想要传递的变量是下一个视频的名称。虽然我设法传递变量与代码我使用PHP页面重新加载新变量（所以下一个视频重新加载）但所有其他变量计数选择哪个视频正在采取其初始值。关键是如果可以在没有页面重新加载的情况下传递文件名变量，只需更改视频。所以我在videoalbum.php文件中运行此脚本。我不想重新加载页面，以便我可以保持currentImage值。

// NEXT ARROW CODE
$('a.nextSlideArrow').click(function() {
$('div.description' + currentImage).removeClass("visible");

currentImage++;

if (currentImage == imagesTotal + 1) {
    currentImage = 1;
}

$('div.description' + currentImage).addClass("visible");
//imagesnames[] is an array with all video files names.
filename = imagesnames[currentImage];

        $.ajax({
            url: 'videoalbum.php',
            type: 'POST',
            //data: {'filename':file},
            success: function() {
                window.location = 'videoalbum.php?filename='+filename;
             }
        });     
return false;
});

我正在使用echo在我的页面上显示视频。 videoalbum.php：

   <div class="galleryPreviewContainer">
    <div class="galleryPreviewImage">
        <?php
                if (empty($filename)){
                    echo '<video class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="900" height="600" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
                    <source src="/uploads/' . $username . '/video/' . $file. '" type="video/mp4">
                    </video>';
                }
                else{
                    echo '<video class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="900" height="600" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
                    <source src="/uploads/' . $username . '/video/' . $filename. '" type="video/mp4">
                    </video>';
                }

        ?>
    </div>

    <div class="galleryPreviewArrows">
        <a href="#" id= "previousarrow" class="previousSlideArrow">&lt;</a>
        <a href="#" id="nextarrow" class="nextSlideArrow">&gt;</a>
    </div>
</div>

Answer 1

您的回调应该处理来自PHP控制器的响应videoalbum.php。

简而言之：

$.ajax({
    url: 'videoalbum.php',
    // Use GET for AJAX calls
    type: 'GET',
    data: {'filename':file},
    success: function( response ) {
        // Do something with the response. If your response is a JSON string, then you can play with it
        $('div.description' + currentImage).find('img').attr('src', response.source);
    }
});

希望它有所帮助。

Answer 2

而不是ajax尝试使用.load()函数。在查询当前页面div元素后，这会加载html的那部分。

$(".galleryPreviewImage").load("videoalbum.php .galleryPreviewImage video", {'filename': filename});

或者

$(".galleryPreviewImage").load("videoalbum.php?filename="+filename+" .galleryPreviewImage video");

使用ajax将变量传递给我当前的php页面而不重新加载页面

2 个答案: