1

PHP、JavaScript、SQL、HTML などを組み合わせて学習しようとしています... firefox (WinXP と Android の両方のバージョン) で問題なく動作するものを作成しました。望ましいアクションは、「処理!」ボタンをクリックするたびに、php スクリプトが「テキストエリア」内のテキストを取得し、各単語をデータベースに入れ、HTML を吐き出すことです...

<html>
<head>
<link rel="stylesheet" type="text/css" href="somestyle.css">
</head>
<body>
<script>

function ajaxUpdate()
{
    var currStr = document.getElementById("textfield").value;
    document.getElementById("textfield").value = currStr.trim();
    var response;
    try{
        var httpReq = new XMLHttpRequest();
    }
    catch(error){
        document.write(error);
    }
    httpReq.open("POST", "ajaxinput.php", true);
    httpReq.send(currStr);
    httpReq.onreadystatechange = function() {

        if(httpReq.readyState == 4){
            response = httpReq.responseText;
            document.getElementById("ajaxoutput").innerHTML = response;

        }
    }

}

function processText(){
    //document.write("in processURL");
    url = document.getElementById("textarea").value;
    document.getElementById("m_block").innerHTML = document.getElementById("m_block").innerHTML + "<br/>text is being worked on by server..."

    var response;
    try{
        var httpReq = new XMLHttpRequest();
    }
    catch(error){
        document.write(error);
    }
    httpReq.open("POST", "textinput.php", true);
    httpReq.send(document.getElementById("textarea").innerHTML);
    httpReq.onreadystatechange = function() {
        if(httpReq.readyState == 4){
            response = httpReq.responseText;
            document.getElementById("m_block").innerHTML = response;
        }
    }

}

</script>

<div id="container">
    <div id="l_block"></div>
    <div id="m_block">
    <form>
    <br/>
    <textarea id="textarea" rows="10" cols="42">Insert text here!</textarea> 
    <button onclick="processText()">process!</button>
    </form>
    </div>
    <div id="r1_block">css 2</div>
    <div id="r2_block">css 1</div>
</div>
</body>

</html>

php-script からの応答は次のようになります。

 search: <input type="text" id="textfield" onkeyup="ajaxUpdate()" />
 <div id="ajaxoutput"></div>

私は物事を「ajax」と呼んでいますが、これがajaxであるべきかどうかはまったくわかりません。しかし、textfield各キーアップ イベントで文字列を送信することになっているため、これと呼んでいます。私が理解している限り、少しアヤックスを感じました。

それにもかかわらず、これは私が言ったようにfirefoxで非常にうまく機能しますが、他のブラウザで試しても何も起こりません. ?アドレスバーのURLに追加されたページがリロードされるだけのようです...

友達全員に Firefox を使うように頼むこともできますが、何が原因なのか知りたいです。どこが間違っていますか。

ありがとう！

編集！ Chromeのデバッガーで掘り下げました。応答が正常に返されることが判明しました。ブレークポイントを設定すると、div に新しいコンテンツが取り込まれることがわかります。ただし、コールバック関数は 2 回続けて呼び出されます。終了後、以前のコンテンツに戻りますが、サーバーの応答はどこにもありません。何が起こっている？

4

2 に答える 2

1

私は今日まったく同じ問題に直面しました。明日誰かに役立つかもしれません。

フォーム要素では、入力タイプは「送信」で、フォームは onsubmit="func()" でした。以下のように:

<form id="x" name="x"  onsubmit="func()">
  <input type="submit" value="Submit"></input>
</form>

どういうわけか、クロムでは、xmlhttp.onreadystatechange=function() から "?" で戻った後、ページ全体がリロードされます。最終的には。投稿されたOPとまったく同じです。

type="button" を使用する場所を読んだ後、フォーム要素を onclick="func()" に更新する必要があります。次のコードは私にとって完璧に機能しています：

<form id="x" name="x"  onclick="func()">
    <input type="button" value="Submit"></input>
</form>

誰かがなぜそれがそのように起こっているのかを説明できれば素晴らしいでしょう.

于 2016-08-20T23:24:52.873 に答える
0

ジョナサンが言ったように、あなたはどのブラウザーについて言及していないので、具体的な答えを出すのは難しいです. また、AJAX の実装が不完全なようです。これを試してください

//Put this on top before anything
if(!String.prototype.trim) 
{  
    String.prototype.trim = function () 
    {  
        return this.replace(/^\s+|\s+$/g,'');  
    };  
}

また、これを使用して AJAX 関連のコードを更新します。

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.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        //Do something
    }
}
xmlhttp.open("POST","textinput.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//xmlhttp.send("fname=Henry&lname=Ford");

ほとんどのブラウザの不一致を処理する jQuery のようなライブラリを使用することもできます。

于 2013-03-26T23:23:53.923 に答える