首页 > 代码库 > ajax数据交互
ajax数据交互
明天要去新公司报道，心里好忐忑，不知道新公司的生活会如何，不知道自己能不能胜任新工作，抓紧今天的半天时间，认真整理一下自己写过的代码，和大家分享
使用ajax动态生成表格，和通过ajax传递参数，跳转至详情页展示详细信息
index.html页面
首先页面引入jquery-1.8.3.min.js,
页面代码：
<body>
<div>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>班级</th>
<th>科目</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
页面样式：
<style>
div{
width:600px;
margin:100px auto 0;
}
tr th {
width:150px;
height:50px;
background: gray;
text-align: center;
}
tr td {
width:150px;
height:50px;
background: #D3D3D3;
text-align: center;
}
</style>
json数据：列表页面数据 list.json 存在data文件夹下
{
"grades" :{
"stu0" :["0","haha","1","语文","30"],
"stu1" :["1","zhangsan","1","语文","80"],
"stu2" :["2","lisi","2","语文","30"],
"stu3" :["3","wangwu","2","语文","20"],
"stu4" :["4","zhaoliu","2","语文","50"],
"stu5" :["5","tianqi","2","语文","50"]
}
}
ajax代码：
$(function(){
$.get(
data/list.json,//请求数据的地址
function(data){//data为请求成功后返回的数据
var html = "";
for(var key in data.grades){//要列出对象的所有属性，由于不知道返回的对象有多少个属性，所以使用for in 循环用key来接收对象的每一个属性stu0---stu5
var val = data.grades[key];//拿出每一个属性对应的值，注：只能使用[]不能使用 . val是一个保存了每一个属性值（数组）
html += ‘<tr><td class="btn">‘ + val[0] + ‘</td><td>‘
+ val[1] + ‘</td><td>‘
+ val[2] + ‘</td><td>‘
+ val[3] + ‘</td><td>‘
+ val[4] + ‘</td></tr>‘;
}
$(‘tbody‘).append(html); //因为ajax是异步执行的，所以将对dom的处理要放在回调函数的最后一行，不能写在ajax外面
//点击编号（传递学生编号）跳转到详情页面（根据学生编号显示数据）；因为表格是动态生成的，所以必须使用事件委托来实现点击事件
$("tbody tr").on("click", ‘.btn‘, function(){
window.location.href = http://www.mamicode.com/‘detail.html?id=‘ + this.textContent;//刚开始不知道怎么取点击的td对应的文本，使用了 console.dir(this);将this对象包括的所有属性打出来
});
} ,"json" )；
})
详情页面的json数据：保存在data文件夹下的detail.json文件中
{
"grades" : {
"0": ["haha","1","30", "40"],
"1": ["zhangsan","1","80", "40"],
"2" :["lisi","2","30","90"],
"3": ["wangwu","2","20", "10"],
"4": ["zhaoliu","2","50", "50"],
"5": ["tianqi","2","50","40"]
}
}
详情页面：detail.html
<body>
<div>
<label>编号</label><span></span>
<label>姓名</label><span></span>
<label>班级</label><span></span>
<label>语文</label><span></span>
<label>数学</label><span></span>
</div>
</body>
样式：
<style>
div{
width:600px;
margin:100px auto 0;
border: 1px solid #D3D3D3;
}
label,span{text-align: left;height: 50px;display: inline-block;}
label{width: 300px; border-right: 1px solid #D3D3D3;}
</style>
js代码：
$(function(){
//获取传递过来的参数，即：获取?后面的字符串，使用split 传入 ?对window.location.href进行分割成数组，获取数组的第二项
var params = window.location.href.split("?")[1];//传来的数据如果是两个以上的话，传数据时用&进行拼接的，所以再分割一次用&符号
var dataList = params.split("&");//dataList为传来的所有数据等号连接的键值对字符串
for(var i = 0; i<dataList.length; i++){
var param= dataList[i].split("=")[0];
var value =http://www.mamicode.com/ dataList[i].split("=")[1];
if(param== "id"){
$.get(
"data/detail.json",
function(data){
for(var key in data.grades ){
if(key == value){
var sp = $("span");
sp.eq(0).html(key);
for(var i = 0; i < sp.length; i++){
sp.eq(i).html(data.grades[key][i-1]);
}
}
}
},json);
}
}
})
ajax数据交互