Question

后台：我正在开发一个小型Web应用程序。 AJAX将成功将数据POST到操作（create.php），create.php将执行必要的mysql查询。完成AJAX后，我向div id="container"></div>添加一条消息，通知用户成功执行，然后清除内容＆＃34; container＆＃34;供将来使用;然而，这就是问题所在。

问题：执行AJAX后，我无法点击已加载到页面上的任何HTML链接（page.php）。我必须刷新页面才能点击任何链接并按照它们到达目的地。是什么导致这种情况发生，我该如何解决？

AJAX不需要返回结果。它只需要在请求完成后执行指定的jQuery代码。在预感中，我改变了create.php来回显$ _POST数组并让AJAX返回结果。一旦AJAX将结果加载到＆＃34;容器＆＃34;我仍然无法点击page.php

上加载的任何链接

答案： AJAX调用后没有重新加载DOM，导致引导程序下拉菜单无法正常运行。每次调用后都必须手动重新初始化bootstrap下拉类。这已经详细解答了here

create.php

<?php
if($_POST){
//run mysql query
}else{
//do nothing
}
?>

form.php的

<form id="new-items">
<input type="text" name="item" />
<input type="button" onclick="create_item()" name="Submit" value="Submit" />
</form>

page.php文件

<html>
<head>
<script>
$(document).ready(function(){
  $("#add_items").click(function(){
    event.preventDefault();
    $("#content").load("form.php");
  });
 });
function create_item(){
    var form_data = $("#new-items").serialize();

    var request = $.ajax({
        url: "create.php",
        type: "POST",
        data: form_data,
    });

    request.done(function(){

        $("#content").append('<div>User was added successfully</div>');
        setTimeout(function(){
            $("#content").fadeOut("slow");
        }, 5000);
        setTimeout(function(){
            $("#content").empty();
        }, 8000);
    });

    request.fail(function(jqXHR, textStatus) {
        alert( "Request failed: " + textStatus );
    });
}
</script>
</head>
<body>
<nav>
<a href="link1.php">Link1</a>
<a href="link2.php">Link2</a>
<a href="#" id="add_items">Add New Items</a>
</nav>
<div id="content"></div>
</body>
</html>

Answer 1

在fadeOut #content元素之后，它仍然是隐藏的。下次调用AJAX函数时，它会将create.php加载到一个不可见的元素中。

尝试：

        setTimeout(function(){
            $("#content").fadeOut("slow", function() {
               $(this).empty().show();
            });
        }, 5000);

其他问题：<div class="content">应为<div id="content">;您没有在脚本的顶部添加jquery.js;您没有将事件对象e传递给click处理程序。

page.php现在应该是这样的：

<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
      $("#add_items").click(function(e){
        e.preventDefault();
        $("#content").load("form.php");
    });
  });
    function create_item(){
        var form_data = $("#new-items").serialize();

        var request = $.ajax({
            url: "create.php",
            type: "POST",
            data: form_data,
        });

        request.done(function(){

            $("#content").append('<div>User was added successfully</div>');
            setTimeout(function(){
                $("#content").fadeOut("slow", function() {
                    $(this).empty().show();
                });
            }, 5000);
        });

        request.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
        });
    }
    </script>
</head>
<body>
    <nav><a href="#" id="add_items">Add New Items</a></nav>
    <div id="content"></div>
</body>
</html>

Answer 2

<nav>中的锚链接将使用新内容自然“刷新”页面。

如果您想通过ajax请求加载内容，那么您应该尝试以下操作：

在链接中添加一个公共类

<nav>
<a href="link1.php" class="anchor">Link1</a>
<a href="link2.php" class="anchor">Link2</a>
<a href="form.php"  class="anchor">Add New Items</a>
</nav>

然后将click事件附加到每个链接，该链接使用e.preventDefault()拦截默认页面刷新。您可以使用该链接的href属性执行ajax请求。

$(function(){
  $(".anchor").on('click', function(e){
    e.preventDefault();
    var $this=$(this);
    $("#content").load($this.attr('href'));
  });
});

Answer 3

AJAX调用后没有重新加载DOM。每次调用后都必须手动重新初始化Boostrap下拉模块。详细解答：answer

在AJAX POST之后，HTML链接不起作用

3 个答案: