为什么用ajax提交就会出现这种情况呢？-PHP 튜토리얼-php.cn

为什么用ajax提交就会出现这种情况呢？

WBOY

풀어 주다： 2016-06-23 13:14:11

원래의

940명이 탐색했습니다.

这是一个提交数据并且在本页显示的效果但是现在有问题比如我提交10次数据可能有两次提交后并且刷新页面后显示不出来刚才插入的数据我之前做的另一个页面不是用ajax做的就没有这种情况 100%能显示出来刚才提交的内容昨天问过这个问题没有解决晚上我又改了一些地方把ajax缓存阻止掉了但是试了一下还是不行还是有显示不出来的情况真的搞不懂这个bug是哪里的原因大家帮我看看吧

提交页面（ajaxtijiao.php）

<?php$pdo=new PDO("mysql:host=localhost;dbname=t1","root","");$stmt=$pdo->prepare("select id,txt from ajax");$stmt->execute();$res=$stmt->fetchall(PDO::FETCH_ASSOC);foreach($res as $v){    echo $v['txt'];}?><!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <script type="text/javascript">        function ajax(url,funsucc){            var oAjax=new XMLHttpRequest();            oAjax.open('GET',url,true);            oAjax.send();                oAjax.onreadystatechange=function(){              if(oAjax.readyState==4){                if(oAjax.status==200){                  funsucc(oAjax.responseText);                }           }}}    </script>    <script type="text/javascript">        window.onload=function(){            var oTxt=document.getElementById('txt1');            var oBtn=document.getElementById('btn1');            oBtn.onclick=function(){                ajax(""ajaxinsert.php?id="+oTxt.value&rand=new Date().getTime(),function(){                    location.href="ajaxtijiao.php?t="+new Date().getTime();                });            }        }    </script></head><body><form action="ajaxinsert.php" method="get">    <input type="text" id="txt1">    <button type="submit" id="btn1">提交</button></form></body></html>

로그인 후 복사

后台页面（ajaxinert.php）

<?php$pdo=new PDO("mysql:host=localhost;dbname=t1","root","");$id=$_GET["id"];$stmt=$pdo->prepare("insert into ajax(txt)values(?)");$stmt->execute(array($id));?>

로그인 후 복사

回复讨论(解决方案)

地址栏上的地址一直都是这个地址 http://localhost/ajaxtijiao.php? 而且一直没有变化

你的表单有
而你的 ajax 程序中并没有阻止表单提交这一默认行为
所以表单总是被提交，即使 ajax 有了什么新行为，也会被提交动作所掩盖

怎么用ajax阻止表单提交呢刚开始用ajax 不懂啊

你的表单有
而你的 ajax 程序中并没有阻止表单提交这一默认行为
所以表单总是被提交，即使 ajax 有了什么新行为，也会被提交动作所掩盖

我把 button按钮的type="submit"去掉不行吗试了一下不行啊

你的表单有
而你的 ajax 程序中并没有阻止表单提交这一默认行为
所以表单总是被提交，即使 ajax 有了什么新行为，也会被提交动作所掩盖

怎么用ajax阻止表单提交呢刚开始用ajax 不懂啊

第34行
oBtn.onclick=function(e){
e.preventDefault();
...
}

还有20行，oAjax.send()函数调用放在oAjax.onreadystatechange定义后面更规范一点。

你的表单有
而你的 ajax 程序中并没有阻止表单提交这一默认行为
所以表单总是被提交，即使 ajax 有了什么新行为，也会被提交动作所掩盖

怎么用ajax阻止表单提交呢刚开始用ajax 不懂啊

第34行
oBtn.onclick=function(e){
e.preventDefault();
...
}

还有20行，oAjax.send()函数调用放在oAjax.onreadystatechange定义后面更规范一点。

试了一下还是不行

1、
2、ajax( "ajaxinsert.php?id="+....

改成这样就可以了。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <script type="text/javascript">        function ajax(url,funsucc){            var oAjax=new XMLHttpRequest();            oAjax.open('GET',url,true);            oAjax.send();                oAjax.onreadystatechange=function(){              if(oAjax.readyState==4){                if(oAjax.status==200){                  funsucc(oAjax.responseText);                }           }}}    </script>    <script type="text/javascript">        window.onload=function(){            var oTxt=document.getElementById('txt1');            var oBtn=document.getElementById('btn1');            oBtn.onclick=function(){                ajax("ajaxinsert.php?id="+oTxt.value&rand=new Date().getTime(),function(){                    location.href="ajaxtijiao.php?t="+new Date().getTime();                });            }        }    </script></head><body><form action="ajaxinsert.php" method="get">    <input type="text" id="txt1">    <button type="button" id="btn1">提交</button></form></body></html>

로그인 후 복사

1、
2、ajax( "ajaxinsert.php?id="+....

都试了不行之前是没有action动作的和method方法的这样也不行

嗯

ajax("ajaxinsert.php?id="+oTxt.value + "&rand=" + (new Date()).getTime(), function(){

로그인 후 복사

嗯

ajax("ajaxinsert.php?id="+oTxt.value + "&rand=" + (new Date()).getTime(), function(){

로그인 후 복사

没事了好了谢谢我太粗心了

你的表单有
而你的 ajax 程序中并没有阻止表单提交这一默认行为
所以表单总是被提交，即使 ajax 有了什么新行为，也会被提交动作所掩盖

怎么用ajax阻止表单提交呢刚开始用ajax  不懂啊

第34行
oBtn.onclick=function(e){
  e.preventDefault();
  ...
}

还有20行，oAjax.send()函数调用放在oAjax.onreadystatechange定义后面更规范一点。
谢谢解决了