search
HomeBackend DevelopmentPHP Tutorialajax-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(&#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
PHP Performance Tuning for High Traffic WebsitesPHP Performance Tuning for High Traffic WebsitesMay 14, 2025 am 12:13 AM

ThesecrettokeepingaPHP-poweredwebsiterunningsmoothlyunderheavyloadinvolvesseveralkeystrategies:1)ImplementopcodecachingwithOPcachetoreducescriptexecutiontime,2)UsedatabasequerycachingwithRedistolessendatabaseload,3)LeverageCDNslikeCloudflareforservin

Dependency Injection in PHP: Code Examples for BeginnersDependency Injection in PHP: Code Examples for BeginnersMay 14, 2025 am 12:08 AM

You should care about DependencyInjection(DI) because it makes your code clearer and easier to maintain. 1) DI makes it more modular by decoupling classes, 2) improves the convenience of testing and code flexibility, 3) Use DI containers to manage complex dependencies, but pay attention to performance impact and circular dependencies, 4) The best practice is to rely on abstract interfaces to achieve loose coupling.

PHP Performance: is it possible to optimize the application?PHP Performance: is it possible to optimize the application?May 14, 2025 am 12:04 AM

Yes,optimizingaPHPapplicationispossibleandessential.1)ImplementcachingusingAPCutoreducedatabaseload.2)Optimizedatabaseswithindexing,efficientqueries,andconnectionpooling.3)Enhancecodewithbuilt-infunctions,avoidingglobalvariables,andusingopcodecaching

PHP Performance Optimization: The Ultimate GuidePHP Performance Optimization: The Ultimate GuideMay 14, 2025 am 12:02 AM

ThekeystrategiestosignificantlyboostPHPapplicationperformanceare:1)UseopcodecachinglikeOPcachetoreduceexecutiontime,2)Optimizedatabaseinteractionswithpreparedstatementsandproperindexing,3)ConfigurewebserverslikeNginxwithPHP-FPMforbetterperformance,4)

PHP Dependency Injection Container: A Quick StartPHP Dependency Injection Container: A Quick StartMay 13, 2025 am 12:11 AM

APHPDependencyInjectionContainerisatoolthatmanagesclassdependencies,enhancingcodemodularity,testability,andmaintainability.Itactsasacentralhubforcreatingandinjectingdependencies,thusreducingtightcouplingandeasingunittesting.

Dependency Injection vs. Service Locator in PHPDependency Injection vs. Service Locator in PHPMay 13, 2025 am 12:10 AM

Select DependencyInjection (DI) for large applications, ServiceLocator is suitable for small projects or prototypes. 1) DI improves the testability and modularity of the code through constructor injection. 2) ServiceLocator obtains services through center registration, which is convenient but may lead to an increase in code coupling.

PHP performance optimization strategies.PHP performance optimization strategies.May 13, 2025 am 12:06 AM

PHPapplicationscanbeoptimizedforspeedandefficiencyby:1)enablingopcacheinphp.ini,2)usingpreparedstatementswithPDOfordatabasequeries,3)replacingloopswitharray_filterandarray_mapfordataprocessing,4)configuringNginxasareverseproxy,5)implementingcachingwi

PHP Email Validation: Ensuring Emails Are Sent CorrectlyPHP Email Validation: Ensuring Emails Are Sent CorrectlyMay 13, 2025 am 12:06 AM

PHPemailvalidationinvolvesthreesteps:1)Formatvalidationusingregularexpressionstochecktheemailformat;2)DNSvalidationtoensurethedomainhasavalidMXrecord;3)SMTPvalidation,themostthoroughmethod,whichchecksifthemailboxexistsbyconnectingtotheSMTPserver.Impl

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool