php 避免 json覆盖,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

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('')

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网