ajax实现从后台拿数据显示在HTML前端

最新推荐文章于 2025-07-14 20:11:55 发布

原创最新推荐文章于 2025-07-14 20:11:55 发布 · 7.8w 阅读

105 ·

CC 4.0 BY-SA版权

文章标签：

#ajax请求数据

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用Ajax技术实现从服务器动态获取并显示数据的例子。通过JavaScript和jQuery库，该示例展示了如何发送异步请求到PHP后端，获取JSON格式的数据，并将其插入到HTML页面的指定位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML页面，ajax是基于id的，所有用id表示。

拿到的数据会显示在这里

ajax源码：

$(document).ready(function() {
           $.ajax({
               url : "admin/get_online_ganbu.php",//后台请求的数据，用的是PHP
               dataType : "json",//数据格式
               type : "post",//请求方式
               async : false,//是否异步请求
               success : function(data) {   //如果请求成功，返回数据。
               var html = "";
               for(var i=0;i<data.length;i++){    //遍历data数组
                       var ls = data[i];
                       html +="<span>测试："+ls.name+"</span>";
                   }
                   $("#test").html(html); //在html页面id=test的标签里显示html内容
               },
           })
       })

php源码：

<?php
   include "conn.php";//这是链接数据的。
   $result = mysql_query("SELECT * FROM online where class =1 ");
   $dataarr = array();
   while($row = mysql_fetch_array($result)){
       array_push($dataarr, $row);
   }
   mysql_close($con);
   echo json_encode($dataarr);
?>