Php、jQuery和AJAX交互和数据操作 - Php, jQuery, and AJAX interaction and data manipulation

Php, jQuery, and AJAX interaction and data manipulation

本文关键字：数据操作交互 AJAX jQuery Php | 更新日期: 2023-09-27

我正在寻找一些基本的指导。我了解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 }

OK考虑此结构中返回的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 />');
        });
    }
});