Question

我正在开发一个单页网站，并且每次从列表中选择项目时，我都会尝试动态加载带有项目图片的滑块。我无法通过任何方式获取值，并且POST全局返回始终为空。我甚至尝试用GET做但不起作用。

以下是按钮的代码：

 <div class="carousel-inner">
            <div class="active item project-1">
                <img class="row" src="includes/uploads/test.png" />
                <div class="project-description project-desc-1 row">
                    <div class="background-container col-md-6">
                        <h1 class="col-md-9 project-title">Project described here</h1>
                        <p class="col-md-10"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
                            <a class="btn btn-default btn-lg show-gallery project" href="#test">View Gallery
                            </a>


                        </p>

                    </div>
                </div>
            </div>

要加载的滑块：

<?php
$project="";
if (isset($_POST['projectName']))
{
$project = $_POST['projectName'];
}
?>
<section id="projects-slider" class="cd-section">
<div class="row projects-slider-background background" id="projects-slider">
    <img src="includes/uploads/up-arrow.png" class="hide-project text-center col-xs-offset-6 col-md-offset-6" alt="Back to Projects" />
    <div id="myCarousel2" class="carousel slide" style="padding-top:10%">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel2" data-slide-to="1"></li>
            <li data-target="#myCarousel2" data-slide-to="2"></li>
            <li data-target="#myCarousel2" data-slide-to="3"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item project-1">
                <img class="row" src="includes/uploads/<?=$project?>/test1.jpg" />

            </div>
            <div class="item">
                <img class="row" src="includes/uploads/<?=$project?>/test2.jpg" />
            </div>
            <div class="item">
                <img class="row" src="includes/uploads/<?=$project?>/test3.jpg" />
            </div>
            <div class="item">
                <img class="row" src="includes/uploads/<?=$project?>/test4.jpg" />
            </div>

        </div>
        <!-- Carousel nav -->

        <a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <!-- LINKED NAV -->

</div>

最后，JQuery代码： $（document）.ready（function（）{

    $(".show-gallery").click(function() {
        $.ajax({
            url: 'public/projects-content.php',
            type: 'POST',
            data: {
                projectName: 'test'
            },
            dataType: 'json',
            success: function(data) {
                $('#ajax').html(data);


            },

            error: function(jqXHR, textStatus, errorThrown) {
                $('#ajax').html('');
                alert('Error Loading');
            }
        });

        $("#ajax").load("public/projects-content.php", function(response, status, xhr) {
            if (status == "error_origin") {
                var msg = "Sorry but there was an error when loading the page's content: ";
                $("#ajax").html(msg + xhr.status + " " + xhr.statusText);
            }
        });
 });

Answer 1

傻了我，我知道这将是一个简单的解决方案。这是我使用的JQuery代码：

<script>
$(document).ready(function(){
    $(".show-gallery").click(function(){
        $.post("public/projects-content.php",
            {
                project:"test"
            },
            function(data){
                $("#ajax").html(data);
            });
    });
});
</script>

使用AJAX将值发布到页面然后将结果加载到div中

1 个答案: