2017-11-04 9 views
0

AJAXとPHPを使用して投稿フォームを作成する方法を学んでいます。それは動作していますが、断続的にしか動作しません。多くの場合、Submitを押すとフォームは更新されません。しかし、それがうまくいけば(そして投稿テキストが成功したことを示す)、ページはすぐに再びリフレッシュされ、フォーム入力ページに戻ります。私は間違って何をしていますか?AJAXとPHPフォームは、投稿後に不注意に再表示されます

注:関連性がある場合は、「POST」メソッドを使用することも試みましたが、「405メソッドは許可されていません」というエラーが続いていました。私はそれが私のWebサーバーのセットアップ方法と関係があると仮定していますが、POST送信を許可する(または拒否する)設定を見つけることができませんでした。そのような場合には、その解決策と関係があります。ここで

は私のHTMLページのコードです:

<html> 
<head> 
<script> 
function showUser(str) { 
    if (str == "") { 
     document.getElementById("txtHint").innerHTML = ""; 
     return; 
    } else { 
     if (window.XMLHttpRequest) { 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } else { 
      // code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       document.getElementById("txtHint").innerHTML = this.responseText; 
      } 
     }; 

     xmlhttp.open("GET","refresh.php?q="+str.value,true); 
     xmlhttp.send(); 
    } 
} 
</script> 
</head> 
<body> 


<form action="#" method="get" onsubmit="return showUser(this.name)"> 
<label>Name :</label> 
<input id="name" name="name" placeholder="Name" type="text"> 
<input type="submit" value="Submit"> 
</form> 

<br> 
<div id="txtHint"><b>Table should show up here...</b></div> 
</body> 
</html> 

そして、ここに私の "refresh.php" ページコードです:formタグから

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

<?php 
$q = strval($_GET['q']); 

echo '<p>Hello World</p>'; 
echo $q; 
echo "<p>Table shows up here!</p>"; 

?> 
</body> 
</html> 
+0

バブリングを止めてください!また、jsのjqueryを調べることもできます。これは、将来、頭痛の種をたくさん節約します(そして、怠け者のjsコーダーにしますが、乾草、どうしてですか?)。ヒント: 'showUser()'関数の最後に 'return false;'を追加してください。 – IncredibleHat

+0

https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submittedの複写が可能 – IncredibleHat

+0

'return false'がトリックをしました!どうもありがとうございます。バブルとjqueryについて学ぶために... :) – toblerone

答えて

0

@Randallと@Balwantが指摘したように、答えはshowUser()関数の最後にreturn false;を追加することでした。

-2

削除アクションパラメータと#値

+0

Hm。私はフォームタグからaction = "#"を削除しましたが、同じ結果が得られます。 – toblerone

+1

アクションを削除してもサブミットが妨げられません...アクションが定義されていない場合、現在のURLにサブミットします – charlietfl

+0

return false false; function showUser(str){...... return false}これを確認してくださいhttps://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission – Balwant

関連する問題