Question

我有一个网站，每个页面都使用ajax加载到了前一页，但是现在面临的问题是使用ajax发布提交表单。我尝试使用ajax缓存表单数据，并且工作得很好，除了当我返回index.php并再次加载同一页面时，它将提交多次。而且我返回并再次加载同一页面的次数越多，它将提交我加载该页面的时间。

我真正的意思是，当我从Open Page One单击index page并提交表单时，它将在第一次重新加载浏览器时起作用。但是，当我使用ajax后退按钮导航到index page并加载相同的Open Page One而无需重新加载浏览器时，它将提交两次，并且如果我再次重复相同的过程，它将基于如何继续提交很多次我单击返回并再次进入页面。

任何人都可以帮助我，我也尝试过使表单ID唯一，但仅适用于其他页面ID。

INDEX.PHP

<div id="ShowPageContent">
    <a href="openpage.php?page=1" class="loadwithajax" data-page-link="index.php">Open Page One</a>
    <a href="openpage.php?page=2" class="loadwithajax" data-page-link="index.php">Open Page Two</a>
    <a href="openpage.php?page=3" class="loadwithajax" data-page-link="index.php">Open Page Three</a>
</div>

<script>
$(function(){
    "use strict";
    $(document).on('click', '.loadwithajax', function(e){
       var targetUrl = e.target.href;
       var prevUrl = $(this).attr('data-page-link');       
        $.ajax({
            type: "POST",
            url: targetUrl,
            data: {targetUrl : targetUrl, prevUrl : prevUrl},
            async: false,
            beforeSend: function(){},
            success: function(htmlBlock){
               $('#ShowPageContent').html(htmlBlock);
           }
        });
        e.preventDefault();
    });
});
</script>

OPENPAGE.PHP

<?php 
 $validateForm = 'validate-form-'.md5($_GET['targetUrl']);
?>
<a href="<?php echo $_GET['prevUrl'];?>" class="loadwithajax" data-page-link="">Back To Main Page</a>
<form action="" method="post" class="<?php echo $validateForm;?>">
    <input type="text" value=""/>
    <input type="submit" value="Send"/>
</form>

<script>
$(function(){
    "use strict";
    $(document).on('submit', '.<?php echo $validateForm;?>', function(e){
        $.ajax({
            type: "POST",
            url: ajax_appserver('shop', 'update_product.php'),
            data: $(self).serialize(),
            beforeSend: function(){},
            success: function(data){
               console.log(data);
           }
        });
        e.preventDefault();
    });
});
</script>

Answer 1

之所以会出现此问题，是因为每次加载页面时，都会将onsubmit处理程序附加到document。多次加载该页面，document将具有同一处理程序的多个副本。

在$(document).off('submit', '.<?php echo $validateForm;?>')之前添加$(document).on('submit'...将在添加新的处理程序之前先删除先前附加的处理程序，并解决您的问题。

Ajax页面内容提交表单的次数是页面加载次数的两倍

1 个答案: