快捷導(dǎo)航

jQuery通過ajax請(qǐng)求php遍歷json數(shù)組到table中的代碼(推薦)

更新時(shí)間：2016年06月12日 17:04:12 作者：丶Kevin

這篇文章主要介紹了jQuery通過ajax請(qǐng)求php遍歷json數(shù)組到table中代碼(推薦)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下

html代碼（test.html），js在html底部

具體代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test-jquery-ajax-list</title>
</head>
<body>
<div class="main">
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>sex</th>
<th>time </th>
</tr>
</thead>
<tbody id="infolist">
</tbody>
</table>
</div>
</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 請(qǐng)求
$.ajax({
type:'post', //請(qǐng)求方式，默認(rèn)get
url :"http://localhost/ajax-demo-list/test.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.sex+' </td>';
$str = $str + '<td> '+val.time+' </td>';
$str = $str + '</tr>';
});
$('#infolist').append($str);
if(data.list == "" || data.list.length < 0 || data.list == "undefined"){
$('#infolist').html('<td colspan="10" style="height:200px;text-align:center;color: #23527c">暫無相關(guān)數(shù)據(jù)...</td>');
}
},error:function(data,statsu){
alert("發(fā)送請(qǐng)求失敗！");
}
});
}
});
</script>
</html>

php代碼（test.php）

<?php
header("Content-Type: application/json;charset=utf-8");
if($_REQUEST['getFunction']){
getList();
}
function getList(){
$data = array(
array(
'id' => 1,
'name' => 'xiaoming',
'sex' => '男',
'time' => '2016年1月22日 14:45:46'
),
array(
'id' => 2,
'name' => '老張',
'sex' => '男',
'time' => '2016年1月22日 14:45:46'
),
array(
'id' => 3,
'name' => '撈王',
'sex' => '男',
'time' => '2016年1月22日 14:45:46'
)
);
$list = json_encode(array('list'=>$data));
print_r($list);
// print_r(json_encode(array('list'=>$data=array())));
}

以上所述是小編給大家介紹的jQuery通過ajax請(qǐng)求php遍歷json數(shù)組到table中的代碼(推薦)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

jQuery+html5+css3實(shí)現(xiàn)圓角無刷新表單帶輸入驗(yàn)證功能代碼
這篇文章主要介紹了jQuery+html5+css3實(shí)現(xiàn)圓角無刷新表單帶輸入驗(yàn)證功能代碼,加入了html5與css3技術(shù),使得整個(gè)表單效果更加唯美華麗,需要的朋友可以參考下
2015-08-08
Jquery 選中表格一列并對(duì)表格排序?qū)崿F(xiàn)原理
該實(shí)現(xiàn)的主要思想是：獲取鼠標(biāo)點(diǎn)擊的表頭單元格的列號(hào)，遍歷數(shù)據(jù)行，獲取每個(gè)<tr>中的html，同時(shí)獲取每個(gè)<tr>標(biāo)簽下對(duì)應(yīng)獲取到的列號(hào)的<td>標(biāo)簽中的內(nèi)容，并取得<th>標(biāo)簽的type屬性值，需要的朋友可以了解下
2012-12-12
jQuery+slidereveal實(shí)現(xiàn)的面板滑動(dòng)側(cè)邊展出效果
WEB開發(fā)中有時(shí)需要在頁面上設(shè)置一個(gè)控制面板，默認(rèn)是不顯示的，當(dāng)用戶有需要時(shí)可以通過按鈕觸發(fā)調(diào)用面板展示。常見的有頁面?zhèn)冗吇雒姘逍Ч?。本文將使用jQuery插件并結(jié)合實(shí)例給大家介紹一下面板滑動(dòng)展示效果。
2015-03-03
jquery checkbox的相關(guān)操作總結(jié)
這篇文章主要介紹了jquery checkbox的相關(guān)操作總結(jié)的相關(guān)資料,需要的朋友可以參考下
2016-10-10
JQuery一種取同級(jí)值的方式(比如你在GridView中)
JQuery一種取同級(jí)值的方式比如你在GridView中,實(shí)現(xiàn)代碼如下，需要的朋友可以參考下
2012-03-03
jQuery綁定事件方法及區(qū)別(bind,click,on,live,one)
這篇文章主要介紹了jq綁定事件方法及區(qū)別,通過五種綁定方式使用bind()進(jìn)行操作,并和one()進(jìn)行區(qū)分,需要的朋友可以參考下
2017-08-08
JQuery球隊(duì)選擇實(shí)例
這篇文章主要介紹了JQuery球隊(duì)選擇實(shí)現(xiàn)方法,實(shí)例分析了jQuery中鼠標(biāo)事件與頁面元素相關(guān)操作技巧,需要的朋友可以參考下
2015-05-05
讀jQuery之五（取DOM元素）
使用過Prototype.js的同學(xué)知道$(xx)調(diào)用后返回的是HTMLElement或其集合。
2011-06-06
jQuery.each使用詳解
這篇文章主要給大家詳細(xì)介紹了jQuery.each使用方法及源碼分析的相關(guān)資料,需要的朋友可以參考下
2015-07-07
jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼
這篇文章主要介紹了jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2017-01-01