论js语言的不严谨(但还是要用) - 吐槽篇
异步请求,同步请求,后台数据返回,前端数据渲染!
无论哪种工作流程,何种方法实现,都避免不了使用js去数据化处理。
这样一来,在get到后台返回固定格式的resultData之后,前端就会做js处理以渲染页面。
那么,处理的时候,就会遇到各种气阀喷的人各种憋屈各种bug。
归根结底,还是技术素养不够用。啥也不说,直接开刷!
今日一粒救命(๑′ᴗ‵๑)I Lᵒᵛᵉᵧₒᵤ❤,来日我请客!
正题:后端返回json数据,前端js渲染DOM失败,为什么失败?
- 整理一波,好话不说,就是js的问题!
- ???
- js为啥这样使用?还不是前任的发明,规则犹如真理一样的存在。谁发明的谁知道。
- 我们会用就行!不会用还能说啥?!!!
- 服了。
- 行,就这么着,低头接着干吧。
后端返回的JSON数据:
{"data":[{"children":[{"children":[{"children":[],"columnEnglish":"/column/kaoshijingyan.html","contentUrl":"","formId":"7","id":"28","name":"考试经验","templatePath":""},{"children":[],"columnEnglish":"/column/fudaojinghua.html","contentUrl":"","formId":"7","id":"29","name":"辅导精华","templatePath":""}],"columnEnglish":"/column/baokaozhinan.html","contentUrl":"","formId":"1","id":"26","name":"报考指南","templatePath":""},{"children":[{"children":[],"columnEnglish":"/column/hangyedongtai.html","contentUrl":"","formId":"7","id":"30","name":"行业动态","templatePath":""},{"children":[],"columnEnglish":"/column/hangyefazhan.html","contentUrl":"","formId":"7","id":"31","name":"行业发展","templatePath":""}],"columnEnglish":"/column/hangyezixun.html","contentUrl":"","formId":"1","id":"27","name":"行业资讯","templatePath":""}],"columnEnglish":"/column/kaoshijiayouzhan.html","contentUrl":"","formId":"1","id":"25","name":"考试加油站","templatePath":""}]}
简化格式:
{
"data": [
{
"name": "考试加油站",
"formId": "1",
"id": "25",
"children": [
{
"name": "报考指南",
"id": "26",
"children": [
{
"id": "28",
"name": "考试经验",
},
{
"id": "29",
"name": "辅导精华",
}
]
},
{
"name": "行业资讯",
"id": "27",
"children": [
{
"name": "行业动态",
"id": "30",
},
{
"name": "行业发展",
"id": "31",
}
]
}
]
}
]
}
js异步代码:
$.ajax({
type:"get", //提交方式
data:{ "id" : id}, //查询的参数
url: tagurl, //提交的路径
dataType:"json", //返回的类型 是Text文本
success:function(data){
var dd = data.data[0].children[0].name;
//var daaa = JSON.stringify(dd);//=================
//console.log(daaa)//==========================
if(data==0) {
console.log("不可以使用");
}else{
// console.log("可以使用");
//获取需要的数据
var group = data.data ;
//拼接字符串
var str = '';
//对数据做遍历,拼接到页面显示
// for(var i=0;i<group.length;i++){
//
// str += '<a class="mui-btn gzbg" onclick="webjsp('
// + group.children.children[i].id
// +','
// +' "tag")'
// +' " id="gzbg_'
// + group.children.children[i].id
// +' ">'
// + group.children.children[i].name
// +'</a>';
// }
//放入页面的容器显示
$('#tagjsp').html(str);
}
}
});
以上就是关于“论js语言的不严谨(但还是要用) - 吐槽篇 ” 的全部内容。