0

まず、これが理解するのが本当に難しい場合は申し訳ありませんが、私が説明するのはかなり複雑です. また、私はこの Ajax のことも初めて知りました。

次のスクリプトがある page1.php があるとします。

function change(str) {

    if (str=="") {
        document.getElementById("servicetxt").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("servicetxt").innerHTML=xmlhttp.responseText;
            }
    }
    xmlhttp.open("GET","change.php?a="+str,true);
    xmlhttp.send(); 
}

on change.php 私はテキストフィールドを作成しているので、 page1.php で change 関数を呼び出すと表示されます。しかし、ユーザーがこのテキスト フィールドに入力しているときに新しい要求を作成したい場合はどうすればよいでしょうか (次のような提案応答: w3schools ajax )。change.php で次のことを試みました。

<script type="text/javascript">
function gethint(str) {

        if (str=="") {
            document.getElementById("hint").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("hint").innerHTML=xmlhttp.responseText;
                }
        }
        xmlhttp.open("GET","gethint.php?a="+str,true);
        xmlhttp.send();

}
</script>
<?
echo "<input type=\"text\" name=\"varenummer\" onkeyup=\"gethint(this.value)\">";
echo "<p>Suggestions: <span id=\"hint\"></span></p>"; 
?>

しかし、これはうまくいきません。これに対する迅速で簡単な答えはないかもしれません。その場合は、このパズルの解決方法を教えてくれる良い記事/チュートリアルを教えてください:)

4

1 に答える 1

1

まず、AJAX呼び出しを介してテキストフィールドを取得する理由はありません（後で大きな変更を行う予定がない限り）。フィールドとそれを制御するスクリプトはメインのpage1.phpファイルの一部である必要がありますが、フィールド自体はchange()、おそらくページ上のボタンをクリックして呼び出されるまで非表示にする必要があります。

属性「hidden」を追加してtrueに設定し、次にスタイル「display：none」を追加してブラウザ全体で機能させることにより、フィールドを非表示にできます。

<input type="text" name="varenummer" onkeyup="gethint(this.value)" hidden=true style="display:none"/>

次に、change()：

document.getElementByName("varenummer").setAttribute("hidden","false");
document.getElementByName("varenummer").style.display = "inline";

gethint()そうすれば、スクリプトを実行するのに問題はありません。phpスクリプトによってエコーされる引用符で囲まれた文字列ではなく、入力フィールドのHTMLを表示しただけであることに注意してください。

編集

さて、jQueryを使わずにJSを試してから久しぶりですが、jsFiddleを使って何が悪かったのかがわかりました。機能はありません.getElementByName()。（複数形）がありますがgetElementsByName()、何らかの理由で正しく機能しません。そこで、パラメーターを追加idして、元の名前パラメーターと同じに設定しました。これで使用できるようgetElementByIdになり、期待どおりに機能します。

function change() {
  document.getElementById("varenummer").setAttribute("hidden","false");
  document.getElementById("hintP").setAttribute("hidden","false");
  document.getElementById("varenummer").style.display = "inline";
  document.getElementById("hintP").style.display = "block";
}

「提案」段落にも同様のフックを追加したので、テキストフィールドに追加されたときに表示されることに注意してください。関数で何も変更する必要はないと思いますがgethint()、ここからテストすることはできません。

于 2013-01-20T22:58:17.743 に答える