Maison >développement back-end >tutoriel php >ajax-post-json-xhr向php获取请求后如何避免重写覆盖当前页面
如题,用js向php发送一个请求并加载响应到当前页面的时候,如何避免重写是覆盖当前页面;
具体情况是这样的:
js:
var navLst = {}; var reqInfo = {}; reqInfo['reqNav'] = true; reqInfo['reqSin'] = 'qtrfss'; //more limt options would be added var reqSent= JSON.stringify(reqInfo); var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = ActiveXObject('Microsoft.XMLHttp'); } xhr.open('POST', '/themes/ticket/model/echoNav.php',true); xhr.onreadystatechange=function(){ if(xhr.readyState == 4) { if(xhr.status == 200) { try{ var resp = eval('('+ xhr.responseText +')'); listMenu(resp); }catch(e){ listMenu(e); } } else { //undo } } }; xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('reqSent='+reqSent);
/themes/ticket/model/echoNav.php返回的是一个数组字符串化的json;
然后获取到了menlist,重写的时候整个页面只剩下menulist了。。。
listmenu:
function listMenu(menuLst){
//var menuLst = ['Sci-Fi','home','wiki'];//menu lst should come from php var nav = ''; var navIE = ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ' '+ ''+ ''; var navStyle = '';//stylesheet's url nav +=navIE; nav +=navStyle; nav +=''; document.write(nav); var navUl = document.createElement('ul'); navUl.id = 'onav_bar'; var navLst = '' for (var i=0 ;i <= menuLst.length - 1; i++) { var navLi = document.createElement('li'); var achor = document.createElement('a'); if(i == 0){ navLi.className = 'onav_top onav_logo'; achor.setAttribute('href','#'); var spanX = document.createElement('span'); spanX.className = 'onav_yellow'; spanX.innerHTML = 'Sci-Fi'; achor.appendChild(spanX); var spanY = document.createElement('span'); spanY.className = 'onav_white'; spanY.innerHTML = '.Net'; achor.appendChild(spanY); }else{ navLi.className = 'onav_top'; achor.setAttribute('href','#'); achor.setAttribute('target','_blank'); achor.setAttribute('title',menuLst[i]); achor.innerHTML = menuLst[i]; } navLi.appendChild(achor); navUl.appendChild(navLi); }; var navDiv = document.getElementById('onav_wrapper'); navDiv.appendChild(navUl); //need to be brief var oAhor = document.getElementById('onav_bar').getElementsByTagName('a'); for (i=0; i<oAhor.length; i++) { var testAttr = oAhor[i].parentNode.getAttribute('class'); if (oAhor[i].href == window.location) { if (testAttr === null) { oAhor[i].parentNode.setAttribute('class', 'onav_active'); } else{ oAhor[i].parentNode.setAttribute('class', testAttr + ' onav_active'); } } } }
解决方案:
是 document.write(nav);
, DOM加载完成后再用document.write()
方法会覆盖以前内容。测试一下,把其中函数中的方法换成document.write('')