Question

我正在研究extjs 4项目。在这个项目中，我必须在js和php文件之间进行回传和第四次通信。所以要从js调用php，我使用的是Ext.Ajax.request。

var dirs = [];

Ext.Ajax.request(
{
    url: 'text.php',
    method: 'GET',
    success: function(response) 
    {
        dirs = JSON.parse(response.responseText);

    },
    failure: function(response) 
    {
        alert('server-side failure with status code ' + response.status);
    }
});

// Creating dropdown list menu
document.write("<select class='select'>");
for (var i = 0; i < dirs.length; i++)
{
    document.write("<option>" + dirs[i] + "</option>");
}
document.write("</select>");

php代码如下：

<?php

$filepath = "scenarios";
$dirs = array();
$files = array();

$scenes = array_diff(scandir($filepath), array('..', '.'));

for ($i = 2; $i < count($scenes)+2; $i++)
{
    if (strpos($scenes[$i], '.'))
    {
        array_push($files, $scenes[$i]);
    }
    else
    {
        array_push($dirs, $scenes[$i]);
    }
}

if (count($dirs) > 0)
{
    echo json_encode($dirs);
}
else
{
    echo json_encode("You do nat have any projects. Please create new project.");
}   

?>

现在问题出现在我想从生成的 dirs object 生成列表菜单的部分中。在firebug DOM dirs = [“google”，“yahoo”]中，但在循环中，dirs.length返回0 ???

当我在for循环之前放置alert(dirs.length)时，它显示0，然后正确生成列表菜单......很奇怪????

Answer 1

请求调用是异步的，这意味着在调用Ext.Ajax.Request之后，下一条指令就是你的循环。但是你还没有从服务器收到数据。您需要将循环置于成功回调中，以确保在从服务器获取数据后执行它。

var dirs = [];

Ext.Ajax.request(
{
    url: 'text.php',
    method: 'GET',
    success: function(response) 
    {
        dirs = JSON.parse(response.responseText);
        // Creating dropdown list menu
        document.write("<select class='select'>");
        for (var i = 0; i < dirs.length; i++)
        {
          document.write("<option>" + dirs[i] + "</option>");
        }
        document.write("</select>");

    },
    failure: function(response) 
    {
        alert('server-side failure with status code ' + response.status);
    }
});

当我在for循环之前放置alert（dirs.length）时，它显示0，然后正确生成列表菜单......很奇怪????

这是因为alert会停止程序的执行流程，直到您单击“确定”。在此期间，数据可能来自服务器，dir变量随之填充。

Answer 2

我看不到任何标题被发送出去 - 这是大多数浏览器所要求的：

header('content-type: application/json; charset=utf8;');
if(sizeof($dirs) > 0){
   echo json_encode(array('success' => true, 'data' => $dirs));
}
else {
   echo json_encode(array('success' => false, 'error' => 'You do not have any projects.' ));
}

JavaScript：

var xhr = new Ext.data.Connection();
xhr.request({
   url: '/text.php',
   method: 'GET',
   headers: {'Accept':'application/json'},
   success: function(response, opts) {
      var obj=Ext.decode(response.responseText);
      var html='';
      Ext.each(obj.data, function(v,i){html+='<option>'+v+'</option>';});
      html='<select>'+html+'</select>';
      console.info(html);
   }
});

HTML生成必须驻留在回调函数中 - 否则根本就没有意义。

没有看到正在返回的JSON - 很难说它有什么问题。

在不发表评论的情况下进行投票为什么确实非常蹩脚。

Ext.Ajax.request中的成功处理行为

2 个答案: