使用不带iframe的JavaScript将PHP文件(带脚本)拖入div

时间:2015-02-11 17:18:31

标签: javascript jquery html loading

在系统约束下工作,我需要一种方法将工作代码从本地.php或.html放入目标div而不需要额外的库,jfiddle,iframes等。(jquery很好)

这是我失败的尝试。

文件的第一部分

<a href="#" id="fruit"> This is some page!</a>
<script>$("#fruit").click(function(){Expand01("fruit.php"); return false;});</script>

<a href="#" id="orange"> A pretty good page...</a>
<script>$("#orange").click(function(){Expand01("orange.php"); return false;});</script>

<a href="#" id="tomato"> I like this page</a>
<script>$("#tomato").click(function(){Expand01("tomato.php"); return false;});</script>

稍后在文件中(在声明Expand01函数之后)

<div id="thisdiv"></div>

尝试1

<script> function Expand01(targetUrl){  
    document.getElementById('thisdiv').style.display = "block";
    document.getElementById('thisdiv').innerHTML = targetUrl;
    document.getElementById('thisdiv').append = '<div id="thatdiv"></div>';
} </script> 

尝试2

<script> function Expand01(targetUrl){
    var myTargetUrl = new XMLHttpRequest();
    document.getElementById('thisdiv').style.display = "block";
    myTargetUrl.open("GET", targetUrl, true);
    myTargetUrl.setRequestHeader("Content-Type","text/plain");
    myTargetUrl.send("");
    document.getElementById('thisdiv').innerHTML = myTargetUrl.responseText;
    document.getElementById('thisdiv').append = '<div id="thatdiv"></div>';
} </script>

尝试3

<script> function Expand01(targetUrl){
    document.getElementById('thisdiv').innerHTML = $.get(targetURL);
} </script>

尝试4

<script> function Expand01(targetUrl){
    var myFile = getHTTPObject();
    myFile.onreadystatechange = function() {
        if(request.readyState == 4) {
            if(myFile.status == 200 || request.status == 304) {
                var targetDiv = document.getElementById('thisdiv');
                targetDiv.innerHTML = myFile.responseText;
            } else {
                alert("Failure");
            }
        }
    }
    myFile.open("GET", targetUrl, true);
    myFile.send(null);
} </script>

1 个答案:

答案 0 :(得分:1)

这是我为ajax应用程序执行此操作时使用的方法。它还允许使用$_SESSION[]变量以及位于容器中的php文件中的任何Javascript或jQuery。

<强> jQuery的:

$.post('pageloader.php', {url: 'path/to/file.php'}, function(data){
    var o = $.parseJSON(data);
    if(o.status == 1){
        $('#yourContainer').html(o.markup);
    } else {
        alert(o.message);
    }
});

PHP:(pageloader.php)

$url = $_POST['url'];
$response = array();

ob_start();
include("markup/" . $url); // Replace or remove '"markup/" . ' depending on file locations  
$response['markup'] = ob_get_clean();

if($response['markup']){
    $response['status'] = 1;
} else {
    $response['status'] = 0;
    $response['message'] = 'There was an issue loading the page.';
}

echo json_encode($response);

希望这有帮助!