0

私のページにはコメントボードがあり、changeTopic（）関数のXMLHttpRequestを使用して、ユーザーが表示しているページに応じてさまざまなトピックをロードします。私は元々、送信フォームphpの最後にこれを持っていました：

header('Location: http://' . $_SERVER['HTTP_HOST'] . $_POST['page']);

問題は、ページ全体を更新したくないということです。メッセージを含むDIVのみを更新します。changeTopic（）関数を、echoを使用してスクリプトタグ内に挿入して実行してみました。1つは、。$ _GET['topic']を取得できませんでした。最初に変数を作成した場合でもecho内で作業しましたが、可能な値の1つをハード挿入して関数を実行しようとすると、次の結果が得られました。

1）メッセージセクションが正しく更新されましたが、index.htmlに含まれているためフォームが失われましたが、クエリ文字列を使用して外部のgettopic.phpからのメッセージのみをロードしました。

2）完全に異なるdivにロードされた外部ファイルを失ったという奇妙な結果が得られました。このファイルはメインページのハッシュを変更します。これは更新のたびにチェックされ、ハッシュに従って適切なファイルが読み込まれるため、ページ全体の更新を使用してもこれが発生することはありません。

// 編集

function changeTopic(topic) {
        if (topic=="") {
            document.getElementById("messagelist").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest) {
            xmlhttp=new XMLHttpRequest();
        }
        else {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("messagelist").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("POST", "gettopic.php?t="+topic,true);
        xmlhttp.send();
    }

私のページのメインアプリケーションは、RaphaelJSで作成したSVGマップです。ユーザーは、このSVGマップから別のdiv'info'に情報ページをロードできます。ページには同様の関数がロードされ、さらに#hashを変更し、changeTopic（）を実行してメッセージボードを変更し、人々が各トピックについて会話できるようにします。

PHPフォームは、通常の入力情報と、ユーザーが閲覧している現在のページによって設定される非表示の「pageid」を取得して、データベースに送信します。さまざまなメッセージはこのページIDでソートされるため、changeTopic（）関数は正しいメッセージのみを取得します：gettopic.php？t = topic（'pageid'）。

フォームを送信した後、メッセージ部分のみを更新し、フォームをクリアしてください。現時点では、ページ全体を更新する（ユーザーがSVGマップ上の位置を失う）か、フォームを失い（代わりに空白の場所を取得する）部分的に更新し、その奇妙な情報ページが欠落しています。

4

3 に答える 3

1

次のようなことができます：

var ajaxfoo = function(obj) {
    var xmlHttp = null;
    try {
        xmlHttp = new XMLHttpRequest();
    }catch(e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(e) {
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e) {
                xmlHttp = null;
            }
        }
    }if (xmlHttp) {
        obj.method = obj.method.toUpperCase();
        xmlHttp.open(obj.method, obj.url, true);
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        if(obj.method == 'POST') {
            if(typeof(obj.params) != 'undefined') {
                xmlHttp.setRequestHeader("Content-length", obj.params.length);
            }
        }
        xmlHttp.setRequestHeader("Connection", "close");
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4) {
                var json = eval(xmlHttp.responseText);
                if(json.success) {
                    if(typeof(obj.success) == 'function'){obj.success(xmlHttp.responseText);}
                }
                else {
                    if(typeof(obj.failure) == 'function') {obj.failure(xmlHttp.responseText);}
                }
            }
        };
        if(obj.method == 'POST' && typeof(obj.params) != 'undefined') {
            xmlHttp.send(obj.params);
        }
        else {
            xmlHttp.send(null);
        }
    }
};

function callfoo(topicname) {
    ajaxfoo({
        method: 'GET',
        url: 'gettopic.php?t='+topicname,
        success: function(response) {
            var json = eval(response);
            alert('success callback function! '+json.data);
        },
        failure: function(response) {
            var json = eval(response);
            alert('failure callback function! '+json.data);
        }
    });
}

そして

success: function(response) {
            var json = eval(response);
            alert('success callback function! '+json.data);
        },

innerHTML のものを追加できます:)

gettopic.php

次に、次のようなエコーが必要です。

{success: true, data: [{id: 1, "title": "test title", "description": "moo"},{id: 2, "title": "test title", "description": "moo"},{id: 3, "title": "test title", "description": "moo"}]}

そして、あなたはこれにアクセスすることができます

json.data[0].title
json.data[1].title
json.data[2].title
json.data[0].description
...

したがって、次のようなことを行うだけで、innerHTML のものを簡単に構築できます。

doc....innerHTML = '<h2>'+json.data[0].title+'</h2>';
于 2011-08-16T08:25:01.100 に答える
1

jQueryを使用してください- 優れたツールです。次のように見える可能性があります

$(function(){
    //when you want to reload your div, just put this line
    $("#div_element").load('your_new_page.php');    
});

以上です ！

于 2011-08-16T07:43:38.887 に答える
0

私はあなたが何をしているのかかなり混乱していますが、readystatechange ハンドラーで changeTopic() を実行しているのは XMLHttpRequest である必要があります。

于 2011-08-16T07:45:17.060 に答える