ajax请求的学习

最新推荐文章于 2024-10-05 19:40:46 发布

愤豆

最新推荐文章于 2024-10-05 19:40:46 发布

阅读量499

点赞数

文章标签： ajax xmlhttprequest function div table class

本文链接：https://blog.csdn.net/as375256234/article/details/7912060

版权

1.数据文件的内容格式如下：

{ "rows":[
   {"LoginName":"1","name":"name1","ID":"1","CP":"CP","DM":"DM"},
   {"LoginName":"2","name":"name1","ID":"2","CP":"CP","DM":"DM"},
   {"LoginName":"3","name":"name1","ID":"3","CP":"CP","DM":"DM"},
   {"LoginName":"4","name":"name1","ID":"4","CP":"CP","DM":"DM"},
   {"LoginName":"5","name":"name1","ID":"5","CP":"CP","DM":"DM"},
   {"LoginName":"6","name":"name1","ID":"6","CP":"CP","DM":"DM"},
   {"LoginName":"7","name":"name1","ID":"7","CP":"CP","DM":"DM"},
   {"LoginName":"8","name":"name1","ID":"8","CP":"CP","DM":"DM"},
   {"LoginName":"9","name":"name1","ID":"9","CP":"CP","DM":"DM"},
   {"LoginName":"10","name":"name1","ID":"10","CP":"CP","DM":"DM"},
   {"LoginName":"11","name":"name1","ID":"11","CP":"CP","DM":"DM"},
   {"LoginName":"12","name":"name1","ID":"12","CP":"CP","DM":"DM"},
   {"LoginName":"13","name":"name1","ID":"13","CP":"CP","DM":"DM"},
   {"LoginName":"14","name":"name1","ID":"14","CP":"CP","DM":"DM"},
   {"LoginName":"15","name":"name1","ID":"15","CP":"CP","DM":"DM"}
   ]
}

2.初始化并请求Ajax的函数
function loadDataFromTXT() {

  if (window.XMLHttpRequest) {
   xmlHttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {

   try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (e) {

   }
  }
  xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//document.getElementById("myDiv").innerHTML = xmlHttp.responseText;

//根据数据格式生成对象对列表
var userlist = eval('(' + xmlHttp.responseText + ')');
//createTable(userlist);

//将对象列表的数据的放到表格中去
dataList(userlist);

   }
  }
  xmlHttp.open("GET", "test.txt", true);
  xmlHttp.send();
}

3.将数据放到div去显示

function dataList(userlist) {

var str1 = "<table id=\"datalist\"><tr style=\"background-color: #c6dbf3\"><th><input type=\"checkbox\" value=\"selected\" name=\"selected\"></th><th>账号</th><th>名称</th><th>工号</th><th>所需单位</th><th>部门</th><th>---++</th></tr>";
var count = userlist.rows.length;

  var str2 = "";
  for ( var i = 0; i < count; i++) {
   str2 += "<tr class=\"mousecss\" id=\"str"+i+"\"><td><input type=\"checkbox\" value=\"selected\" name=\"selected\" value=\""+i+"\"></td><td>"
     + userlist.rows[i].LoginName
     + "</td><td>"
     + userlist.rows[i].name
     + "</td><td>"
     + userlist.rows[i].ID
     + "</td><td>"
     + userlist.rows[i].CP
     + "</td><td>"
     + userlist.rows[i].DM
     + "</td><td><a οnclick=\"deleterow('str"
     + i
     + "')\">-</a><a οnclick=\"addrow('str"
     + i
     + "')\">+</a></td></tr>";
  }
  var str3 = "</table>";
  var str = str1 + str2 + str3;

  alert(str);
  var div = document.getElementById('data');

  div.innerHTML = str;
  //$("data").innerHTML = str;
}

4.最终的显示格式

1	name1	1	CP	DM	-+
2	name1	2	CP	DM	-+
3	name1	3	CP	DM	-+
4	name1	4	CP	DM	-+
5	name1	5	CP	DM	-+
6	name1	6	CP	DM	-+
7	name1	7	CP	DM	-+
8	name1	8	CP	DM	-+
9	name1	9	CP	DM	-+
10	name1	10	CP	DM	-+
11	name1	11	CP	DM	-+
12	name1	12	CP	DM	-+
13	name1	13	CP	DM	-+
14	name1	14	CP	DM	-+
15	name1	15	CP	DM	-+