简体繁体 English

我如何不刷新即可更改页面的内容

[英]how i can i change the content of a page without refreshing

原文 2010-08-07 22:24:34 3 4 php/ javascript

how i can i change the content of a page without refreshing.I know we need to use hidden frames for this but all the tutorials i have come across teach this only for HTML files what if the content is returned from a PHP file how do i do it in such a case? 我如何才能不刷新而更改页面内容。我知道我们需要为此使用隐藏框架，但是我遇到的所有教程都仅针对HTML文件讲授此内容，如果内容是从PHP文件返回的，该怎么办？在这种情况下呢？ what should the php file echo or return? php文件应回显或返回什么？

4 个解决方案

You will have to use Ajax for that, have a look at this tutorial: 您将不得不使用Ajax ，请看一下本教程：

AJAX Tutorial AJAX教程

If you use a hidden frame, the content won't be displayed (hence "hidden"), I think you just mean to use an iframe. 如果您使用隐藏框架，则不会显示内容（因此为“隐藏”），我想您的意思是使用iframe。 But this doesn't fit your description of "without refreshing", since you have to refresh the frame. 但这不符合您对“不刷新”的描述，因为您必须刷新框架。

When loading the PHP file inside the frame, your PHP file just needs to generate HTML the same way you would generate a normal page. 在框架内加载PHP文件时，您的PHP文件只需要生成HTML即可，就像生成普通页面一样。 It's the same whether the PHP file is loaded inside a frame or not. 是否将PHP文件加载到框架中都相同。

I use this method for a lot of my websites and so does Google. 我在很多网站上都使用这种方法，而Google也是如此。 If you want to get data from a PHP file and then dynamically update the page you need to "import" the PHP file somehow without the entire page being redirected, or using iframes (which works too but is a lot messier). 如果要从PHP文件中获取数据，然后动态更新页面，则需要以某种方式“导入” PHP文件，而无需重定向整个页面或使用iframe（它也可以工作，但更麻烦）。 The way you do this is to import the file as a "javascript" file. 您执行此操作的方式是将文件导入为“ javascript”文件。

The following code demonstrates a form called "testform" and a text input called "userpost". 以下代码演示了一个名为“ testform”的表单和一个名为“ userpost”的文本输入。 When you submit the form, it will import a file, and then update div "outputText" with whatever you entered... and wait for it... all without the page being redirected at all or refreshed! 当您提交表单时，它将导入一个文件，然后使用您输入的内容更新div“ outputText” ...并等待...所有操作都不会完全重定向页面或刷新页面！

I have included a lot of extra functions to show how you can access all of your functions on the same DOM unlike if you use frames where you have to use "top. object " or what not 我已经包括了很多额外的功能，向您展示如何访问您的所有功能上不像，如果你使用框架相同的DOM，你必须使用“顶部对象 ”，或什么不可以

index.html 的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 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();

If I had typed in "Hello World" into text input "userpost" then div "outputText" would be filled with the words "Hello World" deleting what was previously there, and the text input will be cleared 如果我在文本输入“ userpost”中输入“ Hello World”，则div“ outputText”将填充“ Hello World”一词，删除之前的内容，并且将清除文本输入

Hidden frames is one design pattern that is a part of the overall AJAX design pattern. 隐藏框架是一种设计模式，是整个AJAX设计模式的一部分。 This is an extreme high-level overview, but this is essentially how it works: 这是一个非常高级的概述，但这实际上是它的工作方式：

Javascript in your HTML page makes a request to your PHP script by using an XMLHTTPRequest object, or a hidden frame or iframe. HTML页面中的Javascript通过使用XMLHTTPRequest对象或隐藏的框架或iframe向PHP脚本发出请求。 This is usually done asynchronously, so you can continue to work with your HTML page while the request is being made. 这通常是异步完成的，因此您可以在发出请求时继续使用HTML页面。
The data is returned to your Javascript. 数据返回到您的Javascript。 At this point, you can then manipulate the page, and update data on the page using various DOM methods. 此时，您可以操纵页面，并使用各种DOM方法更新页面上的数据。