『壹』 如何通过js或者Jquery把json对象展现到页面上
用$.each或for循环然后用$("ul").append("<li id="item“+i+”">
<div class="pic"><a href="#"><img src="XXX"></a></div>
<div class="name">v.name</div>//json返回对象的名称
<div class="age">v.age</div>
<div class="sex">男</div>
<div class="detail">纯情小少年</div>
</li>");//双引号内转成单引号，变容量自己添加
『贰』 关于jquery 中的json数据
function ShowNextCate(Id, ddlId, level) {//查询时的分类js
$("#ddlVideoCateValue").val(Id);
//alert($("#ddlVideoCateValue").val());
var c = $("#" + ddlId + "");
for (var i = level; i <= 4; i++) {
$("#" + i + "ddlVideoCate").remove();
}
$.ajax({
type: "POST",
contentType: "application/json",
url: "/WebService/VR_Video.asmx/GetNextCate",
data: "{Id:" + Id + "}",
dataType: 'json',
success: function(result) {
if (result.d != "") {
c.after(" <select name=\"" + level + "ddlVideoCate" + "\" id=\"" + level + "ddlVideoCate" + "\" onchange=\"ShowNextCate(this.value,'" + level + "ddlVideoCate" + "',this.item(this.selectedIndex).getAttribute('level'));\"><option value=\"-1\">--请选择--</option>\"</select>");
$(result.d).each(function() {
$("#" + level + "ddlVideoCate").append("<option value='" + this[0] + "' level='" + this[4] + "'>" + this[3] + "</option>");
});
}
}
});
}
『叁』 jquery ajax获取json文件数据在表格中显示
$.ajax({
url:"test.json",
type:"GET",
data:"json",
},success:function(data){
$("#date").text(data.startTime);//给相来应自的位置设值
.....
});
『肆』 怎么把json用jquery组合成table
你好！！
//一个笨方法，从json中取出内容拼成table并追加到body中
$(function(){
vartable_1={
"table":{
"_width":"600",
"thead":{
.......
};
varjsonTbl=table_1.table;//获取json中的table
if(jsonTbl!=""){//如果table不为空
var$tbl=$("<table/>");//创建一个table元素
$tbl.width(jsonTbl._width).attr("border",1);//设置table1的宽度和边框
//循环thead中的tr
$.each(jsonTbl.thead.tr,function(i,_tr){
var$tr=$("<tr/>");//创建一个tr元素
//循环tr中的th
$.each(_tr.th,function(j,_th){
var$th=$("<th/>");//创建一个th元素
$th.text(_th._text);//设置th元素的文本内容
if(_th._colspan){//如果存在_colspan属性
$th.attr("colspan",_th._colspan);//为th元素添加colspan属性
}
$tr.append($th);//将th元素追加至tr元素上
});
$tbl.append($tr);//将该tr元素追加至table元素上
});
//循环tbody中的tr
$.each(jsonTbl.tbody.tr,function(i,_tr){
var$tr=$("<tr/>");//创建一个tr元素
//循环tr中的td
$.each(_tr.td,function(j,_td){
var$td=$("<td/>");//创建一个td元素
$td.text(_td._text);//设置td元素的文本内容
$tr.append($td);//将该td元素追加至tr元素上、
});
$tbl.append($tr);//将tr元素追加至table元素上
})
//将表格元素追加至body
$("body").append($tbl);
}
};
//还有种使用模板实现的方式，需要引入一个jquery.tmpl.min.js文件，它是个jQuery模板插件
<scriptid="tbl"type="text/x-jquery-tmpl">
{{if($data!="")}}
<tablewidth=${_width}border=1>
{{each$data.thead.tr}}
<tr>{{eachth}}<thcolspan=${_colspan}>${_text}</th>{{/each}}</tr>
{{/each}}
{{each$data.tbody.tr}}
<tr>{{eachtd}}<td>${_text}</td>{{/each}}</tr>
{{/each}}
</table>
{{/if}}
</script>
<script>
$(function(){
vartable_1={
"table":{
"_width":"600",
"thead":{
.......
};
$("#tbl").tmpl(table_1.table).appendTo($("body"));
});
</script>
希望对你有帮助！！！
『伍』 使用jquery，匹配json的元素，并显示出来
var json = [{"title":"张三","con":"张三是最帅的"},{"title":"李四","con":"李四是最帅的"},{"title":"王五","con":"王五是最帅的"},{"title":"王六","con":"王六最丑专"}];
$("#btn_search").click(function(){
var keyword = $("#keyword").val();
var cons=json.filter(function(e){
return e.title.search(keyword) != -1;
}).map(function(e){
return e.con;
});
if(cons.length){
alert(cons);
}else{
alert("匹配属不到数据");
}
});
『陆』 jquery ([{"msg":"success","Tables"读取返回的json 显示 表结构
<tableid="myid"border="1"bdcolor="black">
<tr><th>序号</th><th>名称</th><th>规格</th><th>单价</th></tr>
</table>
var$myid=$("#myid");//缓存table，不用重复去dom寻找
$.getJSON("网页地址",function(data){
//解析数组
$.each(data.Tables,function(i,item){
$("#info").append(
"<tr><td>"+item.ProctName+"</td>"+
"<td>"+item.ProctModel+"</td>"+
"<td>"+item.ProctNumber+"</dt>"+
"<td>"+item.ProctPrice+"</td>"+
"<td>"+item.ProctAmount+"</td></tr>"
);
});
});
大概就是这个思路 不知道你是ajax方法取还是getjson方法取 反正输出部分都一样
『柒』 jquery如何将json数据显示到input type="text"里
先将json数据拿到，然后用json[key]获取内部数据，如果是对象，得注意操作！
然后用js脚本或者jquery的设值代码操作input对象就是了！