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

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

WBOY

Release： 2016-06-23 13:14:11

Original

949 people have browsed it

这是一个提交数据并且在本页显示的效果但是现在有问题比如我提交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>

Copy after login

后台页面（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));?>

Copy after login

回复讨论(解决方案)

地址栏上的地址一直都是这个地址 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>

Copy after login

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

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

嗯

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

Copy after login

嗯

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

Copy after login

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

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

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

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

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