0

私は単純な ajax 呼び出しを行っていますが、正常に動作しています。ただし、反応が遅く、動作していないと思ってユーザーが 2 回クリックするのは望ましくありません。そのため、「変換中です。しばらくお待ちください」などのメッセージを表示してから応答を受け取りたいと思います。これが私が試したコードです：

function postajax()
{
    document.getElementById('linksarea').innerHTML = "<img src='images/waiting.gif'> Converting please wait...";

    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)
            document.getElementById("links").innerHTML=xmlhttp.responseText;
    }

    var links = window.document.getElementById('linksarea').value;

    xmlhttp.open("POST","ajax.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("links="+links+"&username=xxxx");
}

これが私が変更しようとしているhtmlセクションです

<div id="memberright">
  Convert the links here<br />
  <textarea name="links" id="linksarea" cols="65" rows="10"></textarea><br />
  <input type="button" id="buttonr" onclick="postajax()" value="Convert">
</div>

<div id="ajax">
  <div id="links">
  </div>
</div>
4

2 に答える 2

2

あなたは現在使用しています:

document.getElementById('linksarea').innerHTML = "<img src='images/waiting.gif'>
   Converting please wait...";

を読み込み中の画像に設定しinnerHTML、読み込み中のメッセージを表示する必要があります。後で、その要素の値を取得します。

window.document.getElementById('linksarea').value;

属性はvalue入力にのみ存在し、 はありませんinnerHTML。

#linksが変更したい要素であると仮定して、次のことを試してください。質問のタイトルによると、div要素の値を2回変更しようとしています。

document.getElementById("links").innerHTML = "<img src='images/waiting.gif'>
       Converting please wait..."; 

// or if you have another div with an ID of `linksarea`

document.getElementById("linksarea").innerHTML = "<img src='images/waiting.gif'>
       Converting please wait...";

あなたの HTML を見なくても、私は完全に間違っている可能性がありますが、それはあなたの問題である可能性があります。正しい要素を変更しようとしていることを確認する必要があります。

アップデート：

jQuery の使用:

function postajax(){
    $('#links').html("<img src='images/waiting.gif'> Converting please wait...");

    var params = "links=" + $('#linksarea').val() + "&username=xxxx";

    $.ajax({
        url: "ajax.php",
        type: "POST",
        data: params,
        success: function(result){
            $('#links').html(result)
        }
    }); 
}

示されているように、jQuery は$.ajax()関数を使用して AJAX リクエストの実行を大幅に簡素化します。ライブラリを利用する前に、舞台裏で何が起こっているのかを理解して、すべてを完全に理解できるようにすることをお勧めします。これは、よりポジティブな行動や傾向を助長するのに役立ちます。

于 2012-07-13T16:12:16.063 に答える
1

onreadystatechange関数に別のifステートメントを追加してみてください。「loading」の状態値（これはあなたが探していると思うものです）は「1」です。参考までにこれを使用してください：ピーチピット。基本的に、あなたはそれをこのように見せようとしています：

  xmlhttp.onreadystatechange=function()
  {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
          document.getElementById("links").innerHTML=xmlhttp.responseText;
      }
      else if (xmlhttp.readyState==1 && xmlhttp.status==200)
      {
        document.getElementById('linksarea').innerHTML = "<img src='images/waiting.gif'> Converting please wait...";
      }
  }
于 2012-07-13T16:07:24.387 に答える