HTML页面局部革新的实当代码

变乱相应革新：有哀求才会革新

1、通过JS HTML DOM或jQuery获取HTML元素，通过DOM要领或jQuery要领监听页面变乱，获取用户哀求；

2、通过Ajax将用户哀求提交至处事器，处事器处理赏罚后返回功效，再由Ajax吸取数据；

3、通过DOM要领或jQuery要领将数据载入页面，变乱相应革新完成。

$('#input_date').keypress(function(e){ 　　if(e.keyCode=='13'){ 　　　　$.ajax({ 　　　　　　type: "POST", 　　　　　　url: "inquire_date.php", 　　　　　　data: { 　　　　　　　　birth:null, //1.获取用户哀求（即某些变乱），发送随处事器处理赏罚 　　　　　　　　date:$('#input_date input').val() 　　　　　　}, 　　　　　　dataType: "json", //2.从处事器获取数据 　　　　　　success: function(data){ 　　　　　　　　if (data.success) { 　　　　　　　　　　var festival = data.fetivalInquireResult; //3.将获取的数据载入页面，实现页面变乱相应革新 　　　　　　　　　　$('#show_festival').text(festival); 　　　　　　　　} else { 　　　　　　　　　　$('#show_festival').text("获取节日失败"); 　　　　　　　　} 　　　　　　}, 　　　　　　error: function(jqXHR){ 　　　　　　alert("产生错误：" + jqXHR.status); 　　　　　　}, 　　　　}); 　　$('#festival').hide(); 　　$('#response_festival').show(); 　　} });

局部自动革新：没有哀求局部页面也会自动革新

1、通过按时器函数如setTimeout(),让Ajax每隔一段时刻从处事器获取数据；

2、通过DOM要领或jQuery要领将数据载入页面，实现页面局部自动革新。

$(document).ready(function(e){ setTimeout('updateShow()',0); }); /*局部自动革新页面数据*/ function updateShow(){ 　　$.ajax({ 　　　　type: "GET", 　　　　url: "inquire_date.php?data=" + "inquire", 　　　　dataType: "json", //1.通过按时器按时从处事器获取数据 　　　　success: function(data) { 　　　　　　if (data.success) { 　　　　　　　　var agesFormat = data.agesFormat; 　　　　　　　　var daysFormat = data.daysFormat; //2.将数据载入页面，实现自动革新 　　　　　　　　$('#ages').text(agesFormat); 　　　　　　　 $('#days').text(daysFormat); 　　　　　　} else{ 　　　　　　　　alert("获取数据失败"); 　　　　　　} 　　　　}, 　　　　error: function(jqXHR){ 　　　　alert("产生错误：" + jqXHR.status); 　　　　}, 　　}); 　　setTimeout('updateShow()',500); }

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!