第二个AJAX调用返回整个页面而不是预期的目标

Question

所以我有一个简单的网络应用程序界面，它依赖于AJAX来构建和控制用户可以在任何一个时间点看到的设置。将它们视为子菜单。

<script type="text/javascript">
$(document).ready(function(e) {

    $(".option").click(function() {

        var method = $(this).attr("id");
        var target = "";

        switch(method){
            case "optManPpl":
                target = "/controls/location/manage_people.php";
                break;
            case "optManLoc":
                target = "/controls/location/manage_locations.php"
                break;
        }


        $.ajax({
            type: "POST",
            data: "user=0",
            url: target,
            success: function(msg){
                $("#controls").html(msg);
            }
        });

    });
});
</script>

<div id="options">
    <div id="optManPpl" class="option"> Manage People </div>
    <div id="optManLoc" class="option"> Manage Locations </div>
</div>

<div id="controls">
</div>

这个页面显然是从另一个ajax调用中调用并显示并加载到屏幕上的。当我第一次点击“optManPpl”或“optManLoc”时，呼叫会很好并返回预期的结果。但是，第二次单击其中任何一个（任意组合中的2个调用）时，将返回整个页面而不是[target] url。

编辑：我在整个应用程序中“链接”AJAX调用。我在网络应用程序环境中使用AJAX相对比较新，所以我不确定这是否是最好的方法，但这是我提出的将表单中的用户输入转换为PHP而不必重新提交的方式页面。

编辑：附加图像是第二次调用后页面的样子。在FIRST调用之后，“controls”div标签将填充4个其他div标签。

Answer 1

请在manage_locations.php文件的最后一行之后输出。

您也可以通过以下方式查看。

$.ajax({
    type: "POST",
    data: "user=0",
    url: target,
    success: function(msg){
    alert(msg); return false;
    $("#controls").html(msg);
    }
});

在这里，您只会看到特定的输出。这样您就可以在警报中找到结果。