PHP / AJAX - советы по замене iFrame на DIV (в сочетании с AJAX)

Question

В настоящее время у меня есть веб-страница, на которой iframe содержит данные, хранящиеся в невидимой форме, и я хочу заменить этот iFrame на div, где содержимое изменяется / обновляется с помощью AJAX.

Если вам не хочется читать все это, вы можете пропустить до конца и прочитать мой главный вопрос.

Теперь сложная часть состоит в том, что форма содержит все важные и используемые данные в невидимой форме, которую необходимо отправить через POST. Но страница также включает в себя форму, которая может отправлять данные через GET. И еще: я настроил такие формы, что php-файл получает данные формы в виде массива.

На данный момент работает так: IFrame показывает данные и сохраняет их в невидимой форме. Когда вы хотите, чтобы страница обновлялась автоматически, каждые 30 секунд вы нажимаете кнопку, и вы перенаправляетесь на другую страницу, которая получает данные с предыдущей страницы, используя POST. Когда вы находитесь на странице автообновления, я использую Javascript для автоматической отправки формы, содержащей все важные данные, чтобы обновить страницу.

Повторная отправка страницы не обязательна, потому что я использую PHP для выполнения некоторых важных вычислений с данными, которые я использую. Перемещение всей этой функциональности в Javascript не вариант.

Просто чтобы прояснить ситуацию, вот очень краткое описание моего случая:

Главная страница : 2 формы, 1 настройка POST, поэтому переменные находятся в 1 массиве, 1 GET с 6 переменными. Форма GET может быть изменена на функцию AJAX, поскольку она включает только 6 переменных

Страница автообновления : 2 формы, как и раньше. Хотя эта форма POST автоматически отправляется через Javascript каждые 30 секунд (для обновления PHP функции вывода).

Итак, мой главный вопрос: Могу ли я, и если да, то как получить массив из формы POST в AJAX, а затем отправить его в виде массива на страницу php?

EDIT: Вот часть кода для отправки формы:

<script type="text/javascript">
function paginarefresh() {
    document.forms["updateform"].submit();
}
var paginatimer = setInterval(paginarefresh, 60000);
</script>

и форма строится так:

echo '<form action="data-reis-refresh.php" id="updateform" name="update" method="POST" style="width: 100px;">';
echo '<input type="submit" class="submit replaced" value="Volg deze trein" name="submit-search"/>';
if (round($afgelegdpercentage*100,1)==100) {
echo ' <a href="#" class="submit button"><span style="text-align: center;">Deze trein is al aangekomen</span></a>';
    } else {
echo ' <a href="javascript:submitform(\'update\')" class="submit button"><span style="text-align: center;">Ververs gegevens (automatisch elke minuut)</span></a>';
}
echo '<input type="hidden" name="provincie" value="'.$provincie.'">
      <input type="hidden" name="reisdata[Overstap]" value="'.$reisdata["Overstap"].'">
      <input type="hidden" name="reisdata[Van]" value="'.$reisdata["Van"].'">

но потом дольше (намного дольше и с изменением длины);

Я использую это для всех моих запросов AJAX: [хотя я изменяю его для разных целей]

// Algemene functie om een xmlHttp object te maken. Via dit object kunnen we later Ajax calls plaatsen

function GetXmlHttpObjectReisData() {
    var xmlHttp;
    try { // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } 
    catch (e) { // Internet Explorer
        try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e) {
            try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e) {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }
    return xmlHttp;
}
function CallAjaxReisDataFunction(serverScript,arguments)
{
    var xmlHttp = new GetXmlHttpObjectReisData(); // Functie welke wordt uitgevoerd als de call naar de server klaar is State 4)
    xmlHttp.onreadystatechange = function()
    {
        if (xmlHttp.readyState == 4) 
        {
            handleReisDataResult(xmlHttp.responseText);
        }
    }

    // Ajax call (Request naar de server met eventuele parameters (arguments))
    xmlHttp.open("POST", serverScript, true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", arguments.length);
    xmlHttp.setRequestHeader("Connection", "close");
    xmlHttp.send(arguments);
}

function callReisDataServer(serverScript,van,naar)
{
    CallAjaxReisDataFunction(serverScript,"?&reisdata=" + reisdata);
}

function handleReisDataResult(responseText)
{
    document.getElementById('reis').innerHTML = responseText;
}

Answer 1

JS-код:

var postdata = {"provincie":"123","reisdata":{"Overstap":"234","Van":"345"}};
var post = "";
var url = "data-reis-refresh.php";
var key, subkey;
for (key in postdata) {
    if (typeof(postdata[key]) == object) {
        for (subkey in postdata[key]) {
            if (post != "") post += "&";
            post += key + "%5B" + subkey + "%5D=" + postdata[key][subkey];
        }
    }
    else post += key + "=" + postdata[key];
}
req.open("POST", url, true);
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.setRequestHeader("Content-length", post.length);
req.setRequestHeader("Connection", "close");
req.send(post);

И для переноса ассоциативного массива обратно из PHP в JS:

В PHP-скрипте, вызываемом из запроса AJAX:

echo "(".json_encode($hash).")";

В коде JS парсинг результата:

var hash = eval(response);

Answer 2

В итоге я использовал jQuery .post () и .get ().Они чрезвычайно просты в использовании, намного быстрее и гибче.