如何将通过xmlhttp.open收集的变量传递给PHP的原始代码

Question

我通过XMLHttpRequest获得屏幕分辨率。我打开一个带有屏幕分辨率变量的show_content.php文件，我用GET方法拉出来。这有效！

 xmlhttp.open("GET","show_content.php"+queryString,true); 

并使用以下div中的变量显示此文件

<div id="txtResolution"></div>

这部分也适用！

问题：这个div包含我希望通过其余代码使用的屏幕分辨率变量，但我无法传递它们。如何将这些变量传递给原始代码。

我使用了GET方法但是无法将变量传递给show_content.php之外的原始代码我已经尝试了GLOBALS和Sessions但是没有运气

这是代码。一切正常但我无法将变量从“txtResolution”div传递给代码的其余部分

function showResolution(field_id)
{
var xmlhttp;
if (field_id.length==0)
{ 
 document.getElementById("txtResolution").innerHTML="";
 return;
 }
    if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myvalue").innerHTML=xmlhttp.responseText;
var myphpvar = document.getElementById('myvalue').innerText;
}
}

var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
    }
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
 winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;
 winH = window.innerHeight;
}
  var queryString = "?width=" + winW + "&height=" + winH;



 xmlhttp.open("GET","show_content.php"+queryString,true);
xmlhttp.send();
}    

Answer 1

我假设show_content.php包含一些HTML标记和一些你想在JavaScript代码中使用的php var。您可以将php var内容放在show_content.php返回的标记内隐藏div中的某处：

show_content.php：

<?
$myvar = $_REQUEST['width'] +  $_REQUEST['height'];
// send myvar to response:
print '<div style="display:none" id="myvalue">'.htmlspecialchars($myvar).'</div>';
?>

然后将以下代码放入您的javascript，就在...innerHtml = xmlhttp.responseText;之后（请参阅注释）

function showResolution(field_id)
{
  var xmlhttp;
  if (field_id.length == 0)
  {
    document.getElementById("txtResolution").innerHTML = "";
    return;
  }
  if (window.XMLHttpRequest)
  { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  }
  else
  { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange = function ()
  {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
      document.getElementById("txtResolution").innerHTML = xmlhttp.responseText;
      // Extract myvar value from php
      var myphpvar = document.getElementById('myvalue').innerText;
      alert('Var from php:'+myphpvar);
    }
  }

  var winW = 630, winH = 460;
  if (document.body && document.body.offsetWidth)
  {
    winW = document.body.offsetWidth;
    winH = document.body.offsetHeight;
  }

  if (document.compatMode == 'CSS1Compat' &&
      document.documentElement &&
      document.documentElement.offsetWidth)
  {
    winW = document.documentElement.offsetWidth;
    winH = document.documentElement.offsetHeight;
  }

  if (window.innerWidth && window.innerHeight)
  {
    winW = window.innerWidth;
    winH = window.innerHeight;
  }

  var queryString = "?width=" + winW + "&height=" + winH;

  xmlhttp.open("GET", "show_content.php" + queryString, true);
  xmlhttp.send();
}

当然，更好的方法是在响应中使用某种JSON数据并且不要在AJAX中混合使用html和数据。