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

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

PHP中文网

發布： 2016-06-06 20:42:21

原創

1353 人瀏覽過

如题，用js向php发送一个请求并加载响应到当前页面的时候，如何避免重写是覆盖当前页面；

具体情况是这样的：
js：

var navLst = {};

var reqInfo   = {};
reqInfo[&#39;reqNav&#39;]  = true;
reqInfo[&#39;reqSin&#39;]   = &#39;qtrfss&#39;;   
//more limt options would be added

var  reqSent= JSON.stringify(reqInfo);

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = ActiveXObject(&#39;Microsoft.XMLHttp&#39;);
}

xhr.open(&#39;POST&#39;, &#39;/themes/ticket/model/echoNav.php&#39;,true);
xhr.onreadystatechange=function(){
    if(xhr.readyState == 4) {
        if(xhr.status == 200) {
            try{
                var resp = eval(&#39;(&#39;+ xhr.responseText +&#39;)&#39;);
                listMenu(resp);
            }catch(e){
                listMenu(e);
            }
        } else {
            //undo 
        }
    }

};
xhr.setRequestHeader(&#39;Content-Type&#39;, &#39;application/x-www-form-urlencoded&#39;);
xhr.send(&#39;reqSent=&#39;+reqSent);

登入後複製

/themes/ticket/model/echoNav.php返回的是一个数组字符串化的json；

然后获取到了menlist，重写的时候整个页面只剩下menulist了。。。
listmenu:

function listMenu(menuLst){

//var menuLst = [&#39;Sci-Fi&#39;,&#39;home&#39;,&#39;wiki&#39;];//menu lst should come from php

var nav = &#39;&#39;; 
var navIE = &#39;&#39;+
    &#39;&#39;+
        &#39;&#39;+
    &#39;&#39;+
    &#39;&#39;+
        &#39;&#39;+
    &#39;&#39;+
    &#39;&#39;+
        &#39;&#39;+
    &#39;&#39;+
    &#39; &#39;+
        &#39;&#39;+
    &#39;&#39;;
var navStyle = &#39;&#39;;//stylesheet&#39;s url

nav +=navIE;
nav +=navStyle;
nav +=&#39;&#39;;

document.write(nav);

var navUl = document.createElement(&#39;ul&#39;);
    navUl.id = &#39;onav_bar&#39;;
var navLst = &#39;&#39;
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('')