dounao1875 2018-08-16 12:03
浏览 65
已采纳

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

I have website that every page is being loaded using ajax both back to previous page, but the problem am facing now is submitting a form using ajax post. I try cache a form data with ajax and is working very fine except when i back to index.php and load same page again it will submit multiple time. And the more i back and load same page again it will submit how many time i loaded it.

What i really mean is, when i click on Open Page One from index page, and submit a form it will work at first browser reload. But when i use my ajax back button to navigate to index page and load that same Open Page One without reloading browser, it will submit two times and if i repeat same process again again, it will keep submitting based on how many time i click back and enter the page again.

Please can anyone help me i have also tried making the form id unique but it only work fine for different page 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>
  • 写回答

1条回答 默认 最新

  • doulv1760 2018-08-16 12:29
    关注

    The problem happens because every time you load the page you attach an onsubmit handler to the document. Loading that page multiple times and document will have multiple copies of the same handler attached to it.

    Adding $(document).off('submit', '.<?php echo $validateForm;?>') before $(document).on('submit'... will remove the previously attached handlers before adding a new one, and will solve your problem.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题