jquery ajax 怎样显示出多条内容?代码如下 20
<script>$(document).ready(function(){$("#certificate_button").click(function(){$.ajax...
<script>
$(document).ready(function(){
$("#certificate_button").click(function () {
$.ajax({
type: "get",
url: "/e/extend/certificate/search.php",
data: $("#certificate_search").serialize(),
dataType:'json',
success: function (json) {
if(json.statusCode == 200) {
var html = '<table border="0" align="center" cellpadding="0" cellspacing="0" class="mrg_auto bg_color03">';
html += '<tr><td>姓名:</td><td>'+ json.r.title +'</td></tr>';
html += '<tr><td>身份证号:</td><td>'+ json.r.id_card_number +'</td></tr>';
html += '<tr><td>证书名称:</td><td>'+ json.r.certificate_name +'</td></tr>';
html += '<tr><td>证书编号:</td><td>'+ json.r.certificate_number +'</td></tr>';
html += '<tr><td>报考项目:</td><td>'+ json.r.subject +'</td></tr>';
html += '<tr><td>批准日期:</td><td>'+ json.r.approve_date +'</td></tr>';
html += '<tr><td>有效日期:</td><td>'+ json.r.effective_date +'</td></tr>';
html += '<tr><td>状态:</td><td>'+ json.r.status +'</td></tr>';
html += '</table>';
$("#certificate_result").html(html);
}else{ $("#certificate_result").html('没有查询到结果'); }
}
});
});
})
</script> 展开
$(document).ready(function(){
$("#certificate_button").click(function () {
$.ajax({
type: "get",
url: "/e/extend/certificate/search.php",
data: $("#certificate_search").serialize(),
dataType:'json',
success: function (json) {
if(json.statusCode == 200) {
var html = '<table border="0" align="center" cellpadding="0" cellspacing="0" class="mrg_auto bg_color03">';
html += '<tr><td>姓名:</td><td>'+ json.r.title +'</td></tr>';
html += '<tr><td>身份证号:</td><td>'+ json.r.id_card_number +'</td></tr>';
html += '<tr><td>证书名称:</td><td>'+ json.r.certificate_name +'</td></tr>';
html += '<tr><td>证书编号:</td><td>'+ json.r.certificate_number +'</td></tr>';
html += '<tr><td>报考项目:</td><td>'+ json.r.subject +'</td></tr>';
html += '<tr><td>批准日期:</td><td>'+ json.r.approve_date +'</td></tr>';
html += '<tr><td>有效日期:</td><td>'+ json.r.effective_date +'</td></tr>';
html += '<tr><td>状态:</td><td>'+ json.r.status +'</td></tr>';
html += '</table>';
$("#certificate_result").html(html);
}else{ $("#certificate_result").html('没有查询到结果'); }
}
});
});
})
</script> 展开
展开全部
给你的var html继续用循环追加,参考下我的代码
success:function(json){
var str='<tr><td width="6%" align="center"扒锋毕 valign="bottom" background="<%=basePath%>images/lantiao.gif" bgcolor="#FFFFFF"><strong>序号</strong></td><td width="9%" align="center" valign="bottom" background="<%=basePath%>images/lantiao.gif" bgcolor="#FFFFFF"><strong>教师姓名</strong></td><td width="6%" align="center" valign="bottom" background="<%=basePath%>images/lantiao.gif" bgcolor="#FFFFFF"><strong>性别</strong></td><td width="10%" align="center" valign="bottom" background="<%=basePath%>images/lantiao.gif" bgcolor="#FFFFFF"><strong>电话</strong></td><td width="19%" align="center" valign="bottom" background="<%=basePath%>images/lantiao.gif" bgcolor="#FFFFFF"><strong>毕业院校</strong></td><td width="13%" align="center" valign="bottom" background="<%=basePath%>images/lantiao.gif" bgcolor="#FFFFFF"><strong>专业</strong></td><td width="20%" align="center" valign="bottom" background="<%=basePath%>images/lantiao.gif" bgcolor="#FFFFFF"><strong>家庭住址</strong></td><td width="9%" align="center" valign="bottom" background="<%=basePath%>images/lantiao.gif"春芹 bgcolor="#FFFFFF"><strong>入职时间</strong></td></基察tr>';
$.each(json.list,function(idx,t){
str+="<tr><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_id+"</td><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_name+"</td><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_sex+"</td><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_tel+"</td><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_academy+"</td><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_major+"</td><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_address+"</td><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_entry_date+"</td></tr>";
});
$("#select").html(str);
success:function(json){
var str='<tr><td width="6%" align="center"扒锋毕 valign="bottom" background="<%=basePath%>images/lantiao.gif" bgcolor="#FFFFFF"><strong>序号</strong></td><td width="9%" align="center" valign="bottom" background="<%=basePath%>images/lantiao.gif" bgcolor="#FFFFFF"><strong>教师姓名</strong></td><td width="6%" align="center" valign="bottom" background="<%=basePath%>images/lantiao.gif" bgcolor="#FFFFFF"><strong>性别</strong></td><td width="10%" align="center" valign="bottom" background="<%=basePath%>images/lantiao.gif" bgcolor="#FFFFFF"><strong>电话</strong></td><td width="19%" align="center" valign="bottom" background="<%=basePath%>images/lantiao.gif" bgcolor="#FFFFFF"><strong>毕业院校</strong></td><td width="13%" align="center" valign="bottom" background="<%=basePath%>images/lantiao.gif" bgcolor="#FFFFFF"><strong>专业</strong></td><td width="20%" align="center" valign="bottom" background="<%=basePath%>images/lantiao.gif" bgcolor="#FFFFFF"><strong>家庭住址</strong></td><td width="9%" align="center" valign="bottom" background="<%=basePath%>images/lantiao.gif"春芹 bgcolor="#FFFFFF"><strong>入职时间</strong></td></基察tr>';
$.each(json.list,function(idx,t){
str+="<tr><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_id+"</td><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_name+"</td><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_sex+"</td><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_tel+"</td><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_academy+"</td><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_major+"</td><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_address+"</td><td align='center' valign='middle' bgcolor='#FFFFFF'>"+t.te_entry_date+"</td></tr>";
});
$("#select").html(str);
追问
看不懂。。。
追答
你的代码现在只是页面上显示表格的表头,内容肯定是要从后台获取到的。
而且你是使用的AJAX,返回的json类型。
后台把数据对象转成json类型传到前台,然后前台接受循环遍历打印出来就行了。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询