ajax异步刷新填充html,AJAX无刷新添加数据.html

Document

#box{

width: 800px;

border: 1px solid #000;

padding: 20px;

background-color: #feeeed;

float:left;

}

#addbox{

width:300px;

padding:20px;

background-color: #abcdef;

position: fixed;

right:0px;

}

AJAX

---

姓名：

性别：

女

男

保密

年龄：

提交

function addData() {

// 各种获取

var name = document.addform.name.value;

var sex = document.addform.sex.value;

var age = document.addform.age.value;

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

// xhr responseText

console.log(xhr.responseText);

if (xhr.responseText > 0) {

// loadHtml();

var tr = table.insertRow(table.rows.length);

tr.insertCell(0).innerHTML = xhr.responseText

tr.insertCell(1).innerHTML = name;

tr.insertCell(2).innerHTML = sex;

tr.insertCell(3).innerHTML = age;

tr.insertCell(4).innerHTML = ' ';

alert('安排上了...');

} else {

alert('没安排上...');

}

}

}

}

xhr.open('post', './php/5.php', true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.send('name='+name+'&sex='+sex+'&age='+age);

return false;

}

loadHtml();

function loadHtml() {

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

// console.log(xhr.responseText);

// 清空之前的数据

box.innerHTML = '';

var jsonStr = xhr.responseText;

// eval('var obj = ' + jsonStr);

// var obj = eval('('+jsonStr+')');

var obj = JSON.parse(jsonStr);

console.log(obj);

// 生成表格

var table = document.createElement('table');

table.width = 800;

table.border = 1;

table.cellSpacing = 0;

table.cellPadding = 5;

table.id = 'table';

console.log(table);

box.appendChild(table);

// 添加表头

var tr = table.insertRow(0);

addTH(tr,['ID','NAME','SEX','AGE','PRO']);

// 向表格添加数据

for (var i = 0; i < obj.length; i++) {

var tr = table.insertRow(i+1);

tr.insertCell(0).innerHTML = obj[i].id;

tr.insertCell(1).innerHTML = obj[i].name;

tr.insertCell(2).innerHTML = obj[i].sex;

tr.insertCell(3).innerHTML = obj[i].age;

tr.insertCell(4).innerHTML = obj[i].province;

}

}

}

}

xhr.open('get', './php/4.php', true);

xhr.send();

}

function addTH(tr,data) {

for (var i = 0; i < data.length; i++) {

var th = document.createElement('th');

th.innerHTML = data[i];

tr.appendChild(th);

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史