使用ajax将一个变量传递到我当前的php页面，而无需重新加载页面 - Pass a variable using ajax to my current php page without page reloading

Pass a variable using ajax to my current php page without page reloading

我正在设计一个视频相册。我想使用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>

回调应该处理来自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);
    }
});

希望能有所帮助。

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

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

或者这个

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