jQuery通过ajax请求php遍历json数组到table中代码(推荐)的相关资料

最新推荐文章于 2022-04-22 16:47:02 发布

zyytaiyame

最新推荐文章于 2022-04-22 16:47:02 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/zyytaiyame/article/details/53980320

版权

jQuery通过ajax请求php遍历json数组到table中代码(推荐)的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下

目前有两种写法
第一种:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
<table>
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>picText</th>
      <th>submitTime</th>
    </tr>
   </thead>
   <tbody id="infolist">
   </tbody>
 </body>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
   getList();
   function getList(){
      //jquery ajax请求
      $.ajax({
         type:'post', //请求方式，默认get
         url:'example01.php',
         data:{getFunction:1},
         success:function(data,status){
            $('#infolist').html('');
            $str='';
            $.each(data.list,function(i,val){
               $str=$str+'<tr>';
               $str=$str+'<td>'+val.id+'</td>';
               $str=$str+'<td>'+val.name+'</td>';
               $str=$str+'<td>'+val.picText+'</td>';
               $str=$str+'<td>'+val.submitTime+'</td>';
               $str=$str+'</tr>';
            });
            $('#infolist').append($str);
            if(data.list==""||data.list.length<0||data.list=="undefined"){
               $('#infolist').html('<td colspan="4">暂无相关数据....</td>');
            }
         },
         error:function(data,statsu){
             alert("发送请求失败！");
         }
      });
   }
});
</script>
</html>

example01.php如下
<?
header("Content-Type: application/json;charset=utf-8");
$HOSTNAME="localhost";
$USERNAME="root";
$PASSWORD="";
$DATABASE01="tongzhoufayuan";
$connect=mysql_connect("$HOSTNAME","$USERNAME","$PASSWORD");
mysql_select_db($DATABASE01,$connect);mysql_query("SET NAMES 'GBK'");
$sql="select * from newsimages order by submitTime desc limit 0,5";
$result = mysql_query($sql,$connect);
$sayList = array(); //定义一个数组先
while ($row = mysql_fetch_array($result)) {
    $sayList[] = array(
        'id' => $row['id'],
        'name' => iconv('GBK','UTF-8',$row['name']),
        'picText' => iconv('GBK','UTF-8',$row['picText']),
        'submitTime' => $row['submitTime']
    );
}
mysql_free_result($result);
$list = json_encode(array('list'=>$sayList));
echo ($list);
?>

第二种:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
<table>
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>picText</th>
      <th>submitTime</th>
    </tr>
   </thead>
   <tbody id="infolist">
   </tbody>
 </body>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
   getList();
   function getList(){
      //jquery ajax请求
      $.ajax({
         type:'post', //请求方式，默认get
         url:'example02.php',
         data:{getFunction:1},
         success:function(data,status){
            $('#infolist').html('');
            $str='';
            $.each(data,function(i,val){
               $str=$str+'<tr>';
               $str=$str+'<td>'+val['id']+'</td>';
               $str=$str+'<td>'+val['name']+'</td>';
               $str=$str+'<td>'+val['picText']+'</td>';
               $str=$str+'<td>'+val['submitTime']+'</td>';
               $str=$str+'</tr>';
            });
            $('#infolist').append($str);
            if(data.list==""||data.list.length<0||data.list=="undefined"){
               $('#infolist').html('<td colspan="4">暂无相关数据....</td>');
            }
         },
         error:function(data,statsu){
             alert("发送请求失败！");
         }
      });
   }
});
</script>
</html>

example02.php
<?
header("Content-Type: application/json;charset=utf-8");
$HOSTNAME="localhost";
$USERNAME="root";
$PASSWORD="";
$DATABASE01="tongzhoufayuan";
$connect=mysql_connect("$HOSTNAME","$USERNAME","$PASSWORD");
mysql_select_db($DATABASE01,$connect);mysql_query("SET NAMES 'GBK'");
$sql="select * from newsimages order by submitTime desc limit 0,15";
$result = mysql_query($sql,$connect);
$sayList = array(); //定义一个数组先
while ($row = mysql_fetch_array($result)) {
    $sayList[] = array(
        'id' => $row['id'],
        'name' => iconv('GBK','UTF-8',$row['name']),
        'picText' => iconv('GBK','UTF-8',$row['picText']),
        'submitTime' => $row['submitTime']
    );
}
mysql_free_result($result);
echo json_encode($sayList);
?>