PHP/AJAX - 关于用 DIV 替换 iFrame 的建议(结合 AJAX)

Question

我目前有一个网页，其中 iframe 包含以不可见形式存储的数据，我想用 div 替换该 iFrame，其中的内容通过 AJAX 更改/更新。

If you dont feel like reading all this, you can skip to the end and read my main question.

现在，复杂的部分是表单以不可见的形式包含所有重要和使用的数据，需要通过 POST 发送。但是，该页面还包含一个可以通过 GET 发送数据的表单。并且:我已经设置了这样的表单，php 文件将表单数据作为数组接收。

目前它是这样工作的: iFrame 显示数据，并以不可见的形式存储它。当您希望页面每 30 秒自动刷新一次时，您单击一个按钮，您将被重定向到另一个页面，该页面使用 POST 从前一个页面接收数据。 当您在自动刷新页面时，我使用 Javascript 自动提交包含所有重要数据的表单，以刷新页面。

重新提交页面是必要的，因为我使用 PHP 对我正在使用的数据进行一些重要的计算。将所有这些功能转移到 Javascript 不是一种选择。

为了清楚起见，这里是对我的案例的非常简短的描述:

Main page: 2 forms, 1 POST setup so variables are in 1 array, 1 GET with 6 variables. The GET form could be modified to an AJAX function, as it only includes 6 variables

Auto update page: 2 forms, same as before. Though this POST form is auto-submitted via Javascript every 30 seconds (to update the PHP functions output).

所以，我的主要问题是: 我能否(如果可以的话如何)从 AJAX 中的 POST 表单接收数组，然后将其作为数组发送到 php 页面？

编辑: 下面是一些用于提交表单的代码:

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