Обновление только 1 DIV через PHP после отправки формы

На моей странице есть доска комментариев, на которую я загружаю разные темы в зависимости от страницы, на которой находится пользователь, с помощью XMLHttpRequest в функции changeTopic(). Первоначально у меня было это в конце моей формы отправки php:

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

Проблема в том, что я не хочу обновлять всю страницу, а только DIV, содержащий сообщения. Я попытался запустить функцию changeTopic(), вставив ее в теги скрипта с эхом. Во-первых, я не смог получить .$_GET['topic']. работая внутри эха, даже если я сначала сделал его переменной, но также я попытался запустить функцию, жестко вставив одно из возможных значений со следующими результатами:

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();
    }

Основное приложение на моей странице — это карта SVG, которую я сделал с помощью RaphaelJS. Пользователь может загружать информационные страницы в другой div 'info' из этой карты SVG. Страницы загружаются с аналогичной функцией, которая дополнительно изменяет #хэш и запускает changeTopic(), чтобы изменить доску объявлений, чтобы люди могли обсуждать каждую тему.

Форма PHP принимает обычную заполненную информацию, а также скрытый «идентификатор страницы», который устанавливается текущей страницей, которую просматривает пользователь, и отправляет ее в базу данных. Различные сообщения сортируются по этому идентификатору страницы, поэтому функция changeTopic() выводит только правильные сообщения: gettopic.php?t=topic('pageid').

После отправки формы я бы хотел, чтобы обновлялась только часть сообщений, а форма очищалась. На данный момент это либо полное обновление страницы (пользователь теряет свою позицию на карте SVG), либо частичное обновление, когда я теряю форму (вместо этого получаю пустое место) и эта странная информационная страница отсутствует.


javascript php refresh partial-page-refresh
person kile    schedule 16.08.2011    source источник
comment
вы должны использовать ajax для этого   -  person k102    schedule 16.08.2011
comment
возможно, вы могли бы скопировать/вставить фрагменты кода упомянутых функций здесь.   -  person Shalom Sam    schedule 16.08.2011
comment
кстати .. что именно будет отображаться, когда я запрашиваю gettopic.php?t=foo?   -  person Walialu    schedule 16.08.2011
comment
список сообщений является элементом ul, и gettopic.php будет загружать каждый комментарий в этом списке как li.   -  person kile    schedule 16.08.2011

Ответы (3)


arrow_upward
1
arrow_downward

вы можете сделать что-то вроде этого:

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>';
person Walialu    schedule 16.08.2011
comment
Спасибо за ваше время и усилия, я попробую это сейчас! - person kile; 16.08.2011
comment
Да, мне удалось кое-что из этого извлечь, поэтому я думаю, что в конце концов это сработает, но мне нужно вернуться к этому чуть позже! - person kile; 16.08.2011

arrow_upward
1
arrow_downward

Используйте jQuery — отличный инструмент. Это может выглядеть как

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

вот и все !

person genesis    schedule 16.08.2011
comment
По сути, это то же самое, что и запуск функции changeTopic, которая не сработала. - person kile; 16.08.2011

arrow_upward
0
arrow_downward

Я совершенно не понимаю, что вы делаете, но XMLHttpRequest должен запускать changeTopic() в обработчике readystatechange.

person Ariel    schedule 16.08.2011
comment
Я немного добавил к исходному сообщению. - person kile; 16.08.2011
comment
Ваша PHP-страница должна просто возвращать HTML - не перенаправлять или что-то в этом роде. Не целая страница, а просто кусок HTML. - person Ariel; 16.08.2011