Question

我正在寻找一些基本的指导。我理解jQuery。我理解PHP。我在利用AJAX时遇到了一些困难。

我可以使用AJAX从PHP和后续数据库内容中提取数据，但是如何在HTML中使用它呢？

我习以为常：

<?php
echo '<html><head></head><body>';

 $query = mysql_query("SELECT something FROM sometable WHERE field='.$field.'");
 while ($row = mysql_fetch_array($query)) {
    $id = $row['id'];
    $name = $row['name'];
    if (str_len($name >= 15)) { $name = substr($name,0,15)."..."; }
    $icon = '';
    switch($id) {
      case 1: $icon = 'A';
      case 2: $icon = 'B';
      case 3: $icon = 'C';
     }

      echo '<a href="#'.$id.'">'.$icon.$name.'</a><br />';
 }


 echo '</body></html>';
?>

如何以类似的方式使用AJAX？
或者我应该尝试使用与AJAX类似的东西吗？

例如，我可以这样做（在正确的HTML内部）：

    $.ajax({                                      
      url: 'api.php',         
      data: "", 
      dataType: 'json',       
      success: function(rows)  
      {
        for (var i in rows) {
        var row = rows[i];
            var id = row[0]; 
        var vname = row[1]; 
            $('#output').html('<a href="#id'+id+'">'+vname+'</a><br />'); 
            }
    }
  });

我遇到的困难是了解如何将开关和其他数据操作实现为AJAX项目/数据/对象。

api数据调用类似于：

$result = mysql_query("SELECT something FROM sometable WHERE field =$field");        
  $data = array();
  while ($row = mysql_fetch_row($result)) {
  $data[]=$row;
  }
  echo json_encode($data);

这是我应该操纵数据的地方吗？如果是这样，是否有最佳的特定方式？：

我是否只是在PHP中设置数据操作？如果是这样，如何通过AJAX正确传递数据？

或者我应该使用jQuery / javascript来执行所有数据操作吗？

我已经搜索过，我发现90％的AJAX教程本质上都是简单的，并没有真正解释这些东西。

编辑： JSON数据的常规控制台输出如下所示：

success: function(data)  
      {
       $.each(data, function(index, item){
        var name;
        for(name in item){ console.log(name + " = " + item[name]);}
        });
     }

和控制台：

{ 0 = id }
{ 1 = name }
{ 2 = 3.7 }
{ 3 = Y }
{ 4 = 0 }

Answer 1

确定考虑在此结构中返回JSON

{"menu": {
    "header": "SVG Viewer",
    "items": [
        {"id": "OpenNew", "label": "Open New"}
        {"id": "ZoomIn", "label": "Zoom In"},
        {"id": "ZoomOut", "label": "Zoom Out"},
        {"id": "OriginalView", "label": "Original View"}
    ]
}}

然后你会做这样的事情，将<a>的列表附加到你的#output：

$.ajax({
    url: 'api.php',
    dataType: 'json',
    success: function (data) {
        items = data.menu.items;
        $.each(items, function (index, item) {
            $('#output').append('<a href="#id' + item.id + '">' + item.label + '</a><br />');
        });
    }
});

Php，jQuery和AJAX交互和数据操作

1 个答案: