在 Ajax 弹出窗口中显示 PHP 输出

Question

大家好！所以我是一个菜鸟，我的大部分代码都是由程序员为我完成的。我现在不能让他帮助我。

我有一个无需重新加载页面即可显示结果（由 calc.php 生成）的计算器。 演示在这里：http://www.roofingcalculator.org/popup/popup.htm

现在我从这里添加了 Ajax 弹出窗口（联系表单）：http://dimsemenov.com/plugins/magnific-popup/，它可以工作了。

我想要的是在popop里面显示calc.php的结果，但是它不起作用。

详情：

当用户单击“计算”按钮时，表单使用 POST 将信息发送到 CALC.JS，然后 CALC.JS 将信息发送到 CALC.PHP 并使用此标签在页面上显示结果：

<span id="CalcSum">Results:</span>

当我将 SPAN 标签添加到弹出窗口时，它不显示 PHP 的结果。

问题如何在 AJAX 弹出窗口中显示结果？？

请帮助 - 我非常感谢任何帮助 - 干杯！

Calc.js 内容：

var XmlHttp;
function GetXmlHttpObject() {
   var XmlHttp = null;
   try {
      XmlHttp = new XMLHttpRequest();
   } catch (e) {
      try {
         XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
   }
   return XmlHttp;
}
function StateChanged() {
   if (XmlHttp.readyState == 4 || XmlHttp.readyState == "complete") {
      document.getElementById("CalcSum").innerHTML = XmlHttp.responseText;
   }
}
function ShowSum(url, params) {
   XmlHttp = GetXmlHttpObject();
   if (XmlHttp == null)
      return;
   XmlHttp.onreadystatechange = StateChanged; 
   XmlHttp.open('POST', url, true);
   XmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   XmlHttp.setRequestHeader("Content-length", params.length);
   XmlHttp.setRequestHeader("Connection", "close");
   XmlHttp.send(params);
}

function GetInfo() {var str = 
"size1=" + escape(encodeURI(document.getElementById("size1").value)) +
"&size2=" + escape(encodeURI(document.getElementById("size2").value));

ShowSum('http://www.website.com/calc.php', str);
}

calc.php

<?php
$size1_val    = empty($_POST['size1'])      ? '0'       : $_POST['size1'];
$size2_val    = empty($_POST['size2'])      ? '0'       : $_POST['size2'];
$total_size = $size1_val * $size2_val;
print "Result: ". round($total_size). "";
?>

HTML 表单：

<table>
<script type="text/javascript" src="calc.js"></script>
<form id="formcalc" action="javascript:GetInfo();" accept-charset="UNKNOWN" 
enctype="application/x-www-form-urlencoded" method="post">
<tr>
<td height="24" ><strong>Sizes:</strong>
</td>
<td height="24" valign="top" width="50%">
<input id="size2"/> x <input id="size1" s/> ft.
</td>
</tr>
<tr>
<td COLSPAN="2">
<input name="calc" type="submit" value="Calculate" />

<span id="CalcSum">Results:</span>
</form>
</td>
</tr>
</table>

Answer 1

将$('.popup-with-form').magnificPopup('open'); 添加到您的 stateChanged 函数中，如下所示。在你的例子中为我工作。更改了两个结果范围并打开了弹出窗口。

function StateChanged() {
   if (XmlHttp.readyState == 4 || XmlHttp.readyState == "complete") {
       $('.popup-with-form').magnificPopup('open');
      document.getElementById("CalcSum").innerHTML = XmlHttp.responseText;
      document.getElementById("CalcSumPopup").innerHTML = XmlHttp.responseText;
   }
}

更新：如果您需要更多文档，请点击此处http://dimsemenov.com/plugins/magnific-popup/documentation.html。

Answer 2

Ajax 弹出窗口的 html 是否与表单在同一页面上？如果有，请添加

<span id="CalcSumPopup">Results:</span>

到您希望结果去的弹出窗口并添加

document.getElementById("CalcSumPopup").innerHTML = XmlHttp.responseText;

在 Calc.js 中 document.getElementById("CalcSum").innerHTML = XmlHttp.responseText; 之后。

如果不在同一个页面上，这将不起作用。

编辑： 这是有效的，因为 id 是唯一的。 getElementById 将找到指定 id 的第一次出现然后停止，因此如果您想要更改多个位置，您需要为它们提供唯一的 id。