通过 JSON 输出 HTML，由 ajax 激活

Posted 2023-02-24

【中文标题】通过 JSON 输出 HTML，由 ajax 激活

【英文标题】：HTML output through JSON, activated by ajax

【发布时间】：2013-03-28 05:53:04

【问题描述】：

背景：

我有一个动态拉出模式窗口的页面，该窗口通过 mysql 在一行（多列）上显示扩展信息。我遇到了我的 JSON 代码无法正确填充信息以便输出的问题。我尝试了多个嵌套数组、while 循环和 for 循环。但是，我只需要从数据库中返回一整行信息。在挠头之后，我正在寻求所有 SO 专家的帮助。任何指针都非常感谢。

Div 人口的 Ajax 代码（作品）

  var data_id = $(this).data('id');
                $.ajax(
                    url: 'view_agency_info.php',
                    type: 'POST',
                    data: id: data_id,
                    dataType: 'json',
                    success: function(data)
                        $('.view_modal_content').html(data.html); // LOAD THE DATA INTO THIS DIV
                    ,
                    error: function(jqXHR, textStatus, errorThrown)
                        $('.view_modal_content').html(''); // LOAD THE DATA INTO THIS DIV
                        alert('Error Loading Information');
                    
                );

提取信息并返回 HTML 的 JSON 代码

<?php
$customer_id=$_SESSION['customer']['customer_id'];
$id = (int)$_POST['id'];
$query = "SELECT * FROM collections_list WHERE id=$id && customer_id=$customer_id LIMIT 1"; //expecting one row
$result = mysql_query( $query );
//$message = mysql_fetch_assoc( $result ); //expecting just one row
$message=array();

while ($row = mysql_fetch_assoc($result)) 
    $message[]=$row['agency_name'];
    $message[]=$row['account_number'];
    $message[]=$row['phone'];


$json = array();
$json['html'] = '<p><pre><code>id:'.$id.'.<br>Agency Name: '.$message[0].'<br>Account Number:'.$message[1]."<br>Phone:".$message[2].'</code></pre></p>'.'<br><br>test';

header('Content-Type: application/json');
echo json_encode( $json );
?>

补充问题：

是否可以在返回的 html 中使用“$message['agency_name']”来引用数组中的标头？

解决此问题后，我需要将输出的 html 转换为结构，以允许我的用户以可正确理解的格式查看信息。我知道如何在 html 中执行此操作，但我对 JSON 不熟悉...有没有一种方法可以输出信息而无需手动编码结构？

提前谢谢你。

【问题讨论】：

像个坏主意，你也可以设置字段：$json['data'] = array('id'=> $id, 'Agency Name', $message[0], 'Account号码' => $message[1], '电话' => $message[2]);稍后在 JS 中使用它，例如 data.data :)

我很抱歉，我是一个完整的 json&ajax 新手：我了解设置数组会做什么，但是在那种情况下，我如何使用它返回插入变量的格式化 HTML？另外，这对我的特定实施有什么好处？

这只是通过 json 传递 HTML 的肮脏方式。获取 JSON 数据后尝试构建 html。

你为什么要吐出你的 php 中的行？不好的做法是使用 javascript 来解码 json

【参考方案1】：

$con = mysql_connect("localhost","user","password");
 if (!$con)
  
  die('Could not connect: ' . mysql_error());
  

mysql_select_db(db_nname", $con);



$result = mysql_query("SELECT phone,agency_name FROM  '''' ");

 $rows = array();
 while($r = mysql_fetch_assoc($result)) 
  $rows['results'][] = $r;

 

print json_encode($rows);


   ?>

在你的 html 中

       <table id ="listtable"></table>

  var listdiv = $("#listtable");

      $.getJSON("whatever.php",function(json)
  $.each(json.results,function(i,data) 
         listdiv.append("<tr><th>" + data.phone + "</th><th>" + data.agency_name + "</th></tr>");

    );     
      );

并在附加使用数据。无论你的领域是什么 data.agency_name 数据电话

等等……

【讨论】：

好的，这是对如何填充它的更清晰的解释，但是例如，在 html 中......我如何使用此代码来制作格式化表格。即

姓名：$name

账户：$account

我还可以指出，我无法为您的答案输出完整行的原因是因为我不会将所有列用于填充信息。以任何方式修改代码以使其仅返回必要的列，或者您是否建议仅使用 data.#1 data.#3 data.#5 例如

是的，您限制了 php select 语句中的行。从whatevertable中选择电话，account_number ...或者您可以在js中对其进行限制，然后将其用于追加......'查看编辑的代码'

仅供参考，Web 开发开始远离表格结构，您可以使用列表获得相同的外观和更灵活的布局。

mysql_* functions are deprecated; use PDO instead.