ajax数据交互

Posted 2020-09-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax数据交互相关的知识，希望对你有一定的参考价值。

明天要去新公司报道，心里好忐忑，不知道新公司的生活会如何，不知道自己能不能胜任新工作，抓紧今天的半天时间，认真整理一下自己写过的代码，和大家分享

使用ajax动态生成表格，和通过ajax传递参数，跳转至详情页展示详细信息

首先页面引入jquery-1.8.3.min.js,

页面代码：

页面样式：

　　　　　　<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 = ‘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

样式：

　　<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 = dataList[i].split("=")[1];

　　　　　　　　　　if(param== "id"){

　　　　　　　　　　　　$.get(

　　　　　　　　　　　　　　　"data/detail.json",

　　　　　　　　　　　　　　　　function(data){