Home  >  Article  >  Backend Development  >  ajax-post-json-xhr向php获取请求后如何避免重写覆盖当前页面

ajax-post-json-xhr向php获取请求后如何避免重写覆盖当前页面

PHP中文网
PHP中文网Original
2016-06-06 20:42:211280browse

如题,用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(&#39;li&#39;);
    var achor = document.createElement(&#39;a&#39;);
    if(i == 0){
        navLi.className = &#39;onav_top onav_logo&#39;;
            achor.setAttribute(&#39;href&#39;,&#39;#&#39;);
        var spanX = document.createElement(&#39;span&#39;);
            spanX.className = &#39;onav_yellow&#39;;
            spanX.innerHTML = &#39;Sci-Fi&#39;;
        achor.appendChild(spanX);
        var spanY = document.createElement(&#39;span&#39;);
            spanY.className = &#39;onav_white&#39;;
            spanY.innerHTML = &#39;.Net&#39;;
        achor.appendChild(spanY);
    }else{
        navLi.className = &#39;onav_top&#39;;
        achor.setAttribute(&#39;href&#39;,&#39;#&#39;);
        achor.setAttribute(&#39;target&#39;,&#39;_blank&#39;);
        achor.setAttribute(&#39;title&#39;,menuLst[i]);
        achor.innerHTML = menuLst[i];
    }
    navLi.appendChild(achor);   
    navUl.appendChild(navLi);
};
var navDiv = document.getElementById(&#39;onav_wrapper&#39;);
    navDiv.appendChild(navUl);
//need to be brief
var oAhor = document.getElementById(&#39;onav_bar&#39;).getElementsByTagName(&#39;a&#39;);

for (i=0; i<oAhor.length; i++) {
    var testAttr = oAhor[i].parentNode.getAttribute(&#39;class&#39;);
    if (oAhor[i].href == window.location) {
        if (testAttr  === null) {
            oAhor[i].parentNode.setAttribute(&#39;class&#39;, &#39;onav_active&#39;);
        } else{
            oAhor[i].parentNode.setAttribute(&#39;class&#39;, testAttr + &#39; onav_active&#39;);
        }
    }
}
}


解决方案:


document.write(nav); , DOM加载完成后再用document.write()方法会覆盖以前内容。测试一下,把其中函数中的方法换成document.write('')



Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn