3

javascript / ajax を使用して Web アプリケーションを開発しています。

問題は、私のアプリケーション (一種のソーシャル ネットワーク) で、ユーザーに関する情報 (データベースへの投稿) を読み取る必要があることです。これを行うには、データベースとのやり取りで PHP 専用サービスを使用します。このサービスは、メイン ページ用にフォーマットされた HTML を返します。

ここで、このサービスを AJAX 呼び出しで使用して、HTML を取り込み、ページに挿入します。問題は、JavaScript を使用して挿入された HTML から要素を取得しようとすると、次のようになることです。

document.getElementById('commentsArea_xxx').innerHTML=xmlhttp.responseText;

getElementById戻りますnull。

問題は、AJAX 呼び出しの後、ブラウザがドキュメントを更新しないため、「commentsArea_xxx」がドキュメントに存在しないことだと思います。

この問題を解決するにはどうすればよいですか?

これは私のコードです:

function moreComments(id){
        var footerIcon = document.getElementById('footer');
            footerIcon.innerHTML="<div style='text-align:center;'><img src='images/home_selected.png' onClick='loadHome()'/><img id='cameraButton' src='images/camera.png'/><img src='images/list.png' onClick='loadMyVideo()'/></div>";
            pageOld=pageCurrent;
            pageCurrent=0;
            document.getElementById("ajaxContent").innerHTML="<div id='wrapper' style='top:95px;'><div id='scroller'><ul id='thelist'><li style='text-align:center;'><img src='images/loading.gif' style='text-align:center;'></li></ul></div></div>";
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("commentsArea_"+id).innerHTML=xmlhttp.responseText;
                    loaded();
                    me();
                    setTimeout(function () {myScroll.refresh();}, 0);
                }
            }
            xmlhttp.open("GET","home_more.php?id="+id,true);
            xmlhttp.send();
    }
4

3 に答える 3

5

これはそれを行う必要があります:

$('body').ajaxComplete(function () {
        document.getElementById('commentsArea_xxx').innerHTML=xmlhttp.responseText;
 });

これは、すべての ajax 呼び出しの後に実行されます。

更新: DOM に要素を追加していない場合は、@TJ Crowder の回答を参照してください。

于 2012-11-24T09:39:01.257 に答える
4

問題は、ajax 呼び出しがドキュメントを更新しないため、「commentsArea_xxx」がドキュメントに存在しないことだと思います!!!

右。xmlhttp.responseTextajax 呼び出しが行うことは、プロパティでコードにデータを取り込むことだけです。それをドキュメントに追加するのはあなた次第です。これを行うには、既存の要素の を設定するinnerHTMLか、要素を作成して/ / などdocument.createElementを介してドキュメントに追加します。Element#appendChildElement#insertBefore

詳細については、さまざまなDOM 仕様を確認してください。HTML5 仕様にも、これに関する情報が含まれています。

FWIW、jQuery、YUI、Closure、またはその他のいくつかのような優れたライブラリで利用できる多くのユーティリティ機能とブラウザー差分平滑化があります。人々がこれらのライブラリに費やした労力を活用することで、特定の付加価値のためのコードの記述に集中できます。

于 2012-11-24T09:00:11.303 に答える
0

問題はあなたが述べているとおりです：... ajax呼び出しはドキュメントを更新しません...むしろ、AJAX経由でphpファイルを取得するための呼び出し後のjavascriptは、DOMが更新される前に発生します。ただし、setTimeout() は、DOM をリフレッシュするための少しの時間を与えるという点で適切に動作します。その後、後続の JavaScript コードを setTimeout 関数内に配置できます。少なくとも IE 11、FF 28、Chrome 33、Opera 11 では動作します。9 ミリ秒の遅延で問題ありません。したがって、AJAX 呼び出しに続く JavaScript を setTimeout() 関数内に配置することをお勧めします。

setTimeout(function(){
// Your Code here
    var aVariable = document.getElementById("idRenderedFromAJAX");
}, 9);

もう 1 つは、AJAX 呼び出しを行う前に、xmlhttp.responseText がその値を DOM に既に接続されている JavaScript 変数に返すようにすることです。次に、呼び出しを介してレンダリングされる HTML は、setTimeout 関数内に配置されたコードから getElementById を使用して、更新された DOM を介してアクセスできます。この代替手段はjqueryを必要とせず、Web上に浮かんでいるようには見えないため、単なる提案です。

于 2014-05-12T00:36:27.373 に答える