0

ここにあるチュートリアルを変更しています: http://www.w3schools.com/ajax/ajax_aspphp.asp オートコンプリート名のライブラリがデータベースに保存されるようにします。データベースにまだ名前がない場合に、ユーザーがデータベースに名前を追加できるようにするボタンを追加しました。ボタンをクリックすると、メソッドが起動しますが、addName() メソッドで指定された php スクリプトが実行されません。showHint() メソッドで定義されたスクリプトが実行されるため、これは奇妙です。これが私のJavaScriptです（表示する必要があるのはこれだけです）。スクリプトは省略しました。

    <!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function showHint(str)
        {
            var xmlhttp;
            if (str.length==0)
            {
                document.getElementById("txtHint").innerHTML="";
                return;
            }
            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 (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","gethint.php?q="+str,true);
            xmlhttp.send();
        }

        function addName(str){
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","addName.php?q="+str,true);
            xmlhttp.send();
        }
    </script>
</head>
<body>

<h3>Start typing a name in the input field below:</h3>
<form action="">
    First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
<button type="button" onclick="addName(document.getElementById('txt1').value)">Add Name</button>

</body>
</html>
4

3 に答える 3

0

onreadystatechange を追加し、http ステータス コールを調べて、エラーかどうかを確認します。

Fiddler や Firebug などのツールを使用して、リクエストが送信されるかどうかを確認します。

そして、あなたはをURLエンコードする必要がありますstr.

于 2012-06-15T19:07:27.493 に答える
0

このようにコードを変更してください

<form action="">
    First name: <input type="text" id="txt1" value="ABC-XYZ" onkeyup="showHint(this.value)" />
</form>
于 2012-06-15T19:07:37.577 に答える
0

このような：

  function getXhr() {
      var xmlhttp;
      if (window.XMLHttpRequest) {// code for IE7+, FF, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
      }
      else { // code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      return xmlhttp;
  }

  function showHint(str) {
      var xmlhttp;
      if (str.length==0) {
          document.getElementById("txtHint").innerHTML="";
          return;
      }
      xmlhttp = getXhr();
      xmlhttp.onreadystatechange= function() {
          if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
          }
      };
      xmlhttp.open("GET","gethint.php?q="+str,true);
      xmlhttp.send();
  }

  function addName(str) {
      var xmlhttp = getXhr();
      xmlhttp.onreadystatechange= function() {
         ...your logic here...
      };
      xmlhttp.open("GET","addName.php?q="+str, true);
      xmlhttp.send();
  }
于 2012-06-15T19:09:35.577 に答える