JavaScript + Querystring + div_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-13 11:23 出处：网络

How to load content in to a html page. please note IM not allowed to use php or 开发者_StackOverflow社区C. Only javascript and html.

相关专题：javascript

How to load content in to a html page. please note IM not allowed to use php or 开发者_StackOverflow社区C. Only javascript and html.

for example

load Page B in to Page A

http:myweb.com/index.html?load=pageb

thank you.

Issue an AJAX request to Page B
Get the contents using responseText
Display the contents inside a div using innerHTML property.

If you can use a js framework then I would suggest jQuery and @marcgg's answer will do it.

Just plain JavaScript:

<html>
<head>
<script>
function getUrlVars() {
var map = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    map[key] = value;
});
return map;
}    
function createRequestObject() {
            var ro;
            // Mozilla, Safari,...
            if (window.XMLHttpRequest) {
                ro = new XMLHttpRequest();
                if (ro.overrideMimeType) {
                    ro.overrideMimeType('text/xml');
                    // See note below about this line
                }
                // IE
            } else if (window.ActiveXObject) {
                try {
                    ro = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        ro = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                }
            }
            if (!ro) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
            }
            return ro;
        }
        function sndReq(param,server,handler) {
            //location.href = server+"?"+action; //uncomment if you need for debugging
            http = createRequestObject();
            http.open('GET', server, true);
            http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            http.onreadystatechange = handler;
            http.send(param);
        }
        handler_function = function()
        {
            if(http.readyState == 4)
            {
                if (http.status == 200)
                {
                    document.getElementById("your_div_element").innerHTML = http.responseText;
                }
                else
                {
                    alert('There was a problem with the request.');
                }
            }
        }

</script>
</head>
<body>
<div id="your_div_element"></div>
<script>
var getvars= getUrlVars();
sndReq(null, getvars['action'], handler_function);</script>
</body>
</html>

html:

//Page A
<html>
<head><title>Page A</title></head>
<body>
<div id="pageB"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#pageB').load('pageb.html')
    });
</script>
</body>
</html>

Using jQuery:

 $.ajax({
   type: "POST",
   url: "http://some.com/page.html",
   success: function(msg){
     alert( "here's your data: " + msg );
     jQuery("#yourDivID").html(msg);
   }
 });

http://docs.jquery.com/Ajax/jQuery.ajax

edit: added how to put it into a div