使用ajax自处理php页面


self processing php pages with ajax

re this post AJAX post to self in PHP

使用exit()时,不需要在调用之前打印一些内容吗?我已经编写了标记/ph,其中引用了外部css php脚本。脚本使用print(或echo)和调用标头('type:text/css')。这在自处理php页面时是否有用或必要?我发现它们永远有用。使用get查询和帖子,一个页面可以在任何状态下显示整个网站来自表单。我记得我刚开始学习php时读到的一篇文章断言页面提交给自己,浏览器将自动使用异步请求。但在某些情况下显式ajax调用非常有用。

以下是我正在做的事情和我试图做的事情。我在页面中有一个文本字段和一个按钮我将文本写入文本字段并单击按钮按钮的javascript点击事件处理程序获取文本字段值并将其附加到附加到请求中url的get查询中。方法是获取

edit:指定成功执行此操作的环境。我在Mac OSX上使用Firefox v12.0,在本地机器上预装了apache服务器。(任何Mac运行OSX的人,都有一个预装的apache服务器,但激活php需要编辑httpd.com文件以取消对加载php模块的行的注释。还有一条线告诉Apache使用什么扩展来查找和执行php代码。你也必须告诉它将index.php作为索引文件,在其中运行php并将其作为目录索引文件)

javascript代码:

function _FETCH()
     { 
      this.init = function(oName, elem, txt)
           {
            var but = document.getElementById(elem);
                but.addEventListener('click', function(){ oName.req('GET', self, '', null, oName, txt) } )
           }
      this.req = function(method, url, type, msg, oName, txt)
           {
             var field = document.getElementById(txt);
                 url+="?ajxTst="+encodeURIComponent(field.value);
             var it = new XMLHttpRequest();
                 it.open(method, url, type);
                 it.setRequestHeader('Content-Type', 'text/plain');
                 it.onreadystatechange = function()
                    {
                     var elem = document.getElementById('well');
                     switch(it.readyState)
                       {  
                        case 0:
                        case 1:
                        break;
                        case 2:
                        case 3:
                        elem.childNodes[0].data = " waiting";
                        break;
                        case 4:
                        oName.handleResponse(it.responseText);
                        break;
                        default:
                        alert('ajax processing error');
                        break;
                       }
                    }
                 it.send(msg);
           }
      this.handleResponse = function(resp)
           {
            var elem = document.getElementById('well');
                elem.childNodes[0].data = " "+resp;
           }
     }

页面中的php、javascript和标记:

<?php
/*
created 11/4/2014
*/
$_self = basename($_SERVER['PHP_SELF']);
if($_POST || $_GET)
  {
   if($_GET['ajxTst'])
     {
      header("Content-Type: text/plain");
      print $_GET['ajxTst'];
      exit();
     }
  }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>JS lab 2</title>
<link rel="stylesheet" type="text/css" href="local.css" media="screen" />
<script type="text/javascript" src="local.js">
</script>
<script type="text/javascript">
 //<![CDATA[
  var self = "<?php print $_self; ?>";
  window.onload = function()
   {
    var ajx = new _FETCH();
        ajx.init(ajx, 'send', 'tlk');
    }
 //]]>
 </script>
 </head>
 <body>
 <div class="panel">
 <p class="title">Js Lab 2</p>
 <p class="norm"><a href="../?uar=lab_3">Lab 3 home</a></p>
 <p class="norm">Work with ajax and self processing page (this)</p>
 <hr />
 <p class="norm" id="well"> idle </p> 
 <p class="norm">
 <input type="text" id="tlk" value="" /><input type="button" id="send" value="send" />
 </p>
 </div>
 </body>
 </html>

我希望有人能找到它。我花了一段时间才找到它。