Question

我正在尝试构建一个页面，当用户单击按钮时，该页面将显示PHP数组中的下一个项目。我是Ajax的新手，我正在使用“Head First Ajax”一书作为指南。我的代码（下面）不起作用，我不明白为什么。坦率地说，我甚至不确定如何调试Ajax ......

代码位于名为Index.php的文件中。我正在使用WampServer。

页面正确加载。这是代码：

<html><head><script type="text/javascript">
  var id=null;
  function getRequest(){
    try {
      request = new XMLHttpRequest();
    }catch (MS){
      try {
        request = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (MoreMS){
        try {
          request = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (failure){
          request = null;
        }
      }
    }
    return request;
  }

  function showNext(itemId){
    request=getRequest();
    if(request==null){
      alert("Request object is null");
      return;
    }
    var url="index.php?itemId="+escape(itemId);
    request.open("GET",url,true);
    request.onreadystatechange=function(){
      if(request.readyState==4){
        alert("Request.readyState is 4");
        if(request.status==200){
          alert("Request.status is 200");
          document.getElementById('article').value=request.responseText;
        }else{
          alert("Request.status not 200");
          return;
        }
      }else{
        alert("Request.readystate not 4");
        return;
      }
    }
    request.send(null);
  }

  function getItemId(){
    if(id==null){
      id=0;
    }else{
      id=id+1;
    }
    return id;
  }

  function doIt(){
    itemId=getItemId();
    showNext(itemId);
  }
</script></head>
<body><p>
  <textarea id='article'>
  </textarea>
</p>  
<p>
  <button type="button" id='showNext1' onclick="doIt()" >Show next</button>
</p></body></html>

<?php
  $array=array(10,21,32,43,54,65,76);
  if(!isset($_GET['itemId'])){
  }else{
    echo $array[$_GET['itemId']];
  }
  var_dump("GET :",$_GET);
?>

当我点击按钮时，会发生以下情况：

我得到两次 Request.readystate not 4提醒，然后一次Request.readyState is 4，然后一次Request.status is 200，然后textarea被填充，然后再次一次 Request.readystate not 4。毕竟textarea包含我的整个代码，然后是：

10<pre class='xdebug-var-dump' dir='ltr'><small>string</small> <font color='#cc0000'>'GET :'</font> <i>(length=5)</i>
</pre><pre class='xdebug-var-dump' dir='ltr'>
<b>array</b>
  'itemId' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'0'</font> <i>(length=1)</i>
</pre>

然后，如果我再次点击，我会得到相同的警报和输出，但最后我得到21<pre class='xdebug-var-dump'....。接下来单击生成相同的内容，最后使用32<pre class....等等。

Answer 1

尝试为onreadystatechange事件内联定义函数。此外，使用value而非innerHtml访问textarea的值。修改后的showNext()将是：

function showNext(itemId){
    request=getRequest();
    if(request==null){
        return;
    }
    var url="index.php?itemId="+escape(itemId);
    request.open("GET",url,true);
    request.onreadystatechange= function(){
        if(request.readyState==4){
            if(request.status==200){
            document.getElementById('article').value=request.responseText;
            }
        }   
    }
    request.send(null);
}

为什么我的Ajax代码不能运行？

1 个答案: