php - 如何在不刷新的情况下更改页面内容

您必须使用Ajax，看一下本教程：

AJAX Tutorial

如果您使用隐藏框架，内容将不会显示（因此“隐藏”），我认为您只是想使用iframe。但这不符合您对“不刷新”的描述，因为您必须刷新框架。

在框架内加载PHP文件时，您的PHP文件只需要生成HTML，就像生成普通页面一样。无论PHP文件是否加载到框架内都是一样的。

我在很多网站上使用此方法，Google也是如此。如果你想从PHP文件中获取数据然后动态更新页面，你需要以某种方式“导入”PHP文件，而不是重定向整个页面，或者使用iframe（它也可以工作，但是很麻烦）。这样做的方法是将文件导入为“javascript”文件。

以下代码演示了一个名为“testform”的表单和一个名为“userpost”的文本输入。当你提交表单时，它会导入一个文件，然后用你输入的任何内容更新div“outputText”...等待它......所有页面都没有被重定向或刷新！

我已经包含了许多额外的功能来展示如何在同一个DOM上访问所有功能，这与使用“top。 object ”或者不使用的框架不同。

的index.html

<html>
  <head>

    // Get objects by their id. We will use this in the PHP imported file
    Get = function(id) {
      return (!id) ? null : (typeof id == "object") ? id : 
      (document.getElementById) ? document.getElementById(id) : 
      (document.all) ? document.all[id] :
      (document.layers) ? document.layers[id] : null;
    }

    // Formats a string so it does not break in a URL
    String.prototype.formatForURL = function() {
      var str = escape(this.replace(/ /gi, "%20"));
      str = str.replace(/\&/gi, "%26").replace(/\=/gi, "%3D");
      str = str.replace(/\//gi, "%2F")
      return str;
    }

    String.prototype.contains = function(str) {
      return (!str) ? false : (this.indexOf(str) > -1);
    }

    Object.prototype.killself = function() {
      this.offsetParent.removeChild(this);
    }

    // Import the script
    ImportScript = function(js) {
      var head = document.getElementsByTagName("head")[0];
      var script = document.createElement("script");
      script.setAttribute("type", "text/javascript");
      script.setAttribute("language", "JavaScript");
      script.setAttribute("charset", "utf-8");
      // we add the is tag so can delete the "js" file as soon as it executes
      script.setAttribute("id", "import_" + head.children.length);
      script.setAttribute("src", js + (js.contains("?") ? "" : "?") + "&is=" + head.children.length);
      head.appendChild(script);
    }

    // Get and send value to php file
    sendInfo = function() {
      var file = "js/myFile.php?userpost=";
      file += document.testform.userpost.value.formatForURL();
      ImportScript(file);
    }

  </head>
  <body>
    <div>
     <form name=testform onsubmit="sendInfo(); return false">
       <input type=TEXT name=userpost />
       <input type=SUBMIT value=Go />
     </form>
    </div>
    <div id=ouputText>
      This text will be replaced by what you type 
      and submit into the form above
    </div>
  </body>
<html>

JS / myFile.php

<?php

  // Here you can now use functions like mysql_connect() etc. even exec()
  // ANYTHING! Save them into variables and output them as text which goes
  // Straight into the javascript! e.g. :
  // $con = mysql_connect("localhost", "username", "password");
  // if($con) {
  //   ... code to retrieve data and save into $variable 
  // }
  // print "alert(\"$variable\");"; // this alerts the value in variable

  if(isset($_GET['userpost'])) {
    $userpost = $_GET['userpost'];
?>
  Get("outputText").innerHTML = "<?=$userpost; ?>";
<?php
  }
?>

// Clear text area
document.testform.userpost.setAttribute("value", "");

// Remove the file from header after info is changed
Get("import_<?=$_GET['is']; ?>").killself();

如果我输入“Hello World”进入文本输入“userpost”，那么 div“outputText”将填充“Hello World”字样删除之前的内容，文本输入将被清除

隐藏帧是一种设计模式，它是整个AJAX设计模式的一部分。这是一个极端的高级概述，但这基本上是它的工作原理：

HTML页面中的Javascript通过使用XMLHTTPRequest对象或隐藏的框架或iframe向您的PHP脚本发出请求。这通常是异步完成的，因此您可以在发出请求时继续使用HTML页面。
数据将返回给您的Javascript。此时，您可以操作页面，并使用各种DOM方法更新页面上的数据。

如何在不刷新的情况下更改页面内容

4 个答案:

的index.html

JS / myFile.php