Place PHP results inside HTML page

Question

I have a PHP file which has code to echo some HTML. I would like to provide the PHP file to some end users which can be done like this:

<?php include 'file.php'; ?>

Unfortunately my users will for instance have index.html and this will not work. I don't want to ask my users to change there HTML file in to PHP. Another approach is to modify the .htaccess file:

<Files index.html>
AddType application/x-httpd-php .html
</Files>

I don't want to ask this of them as well. So what are my other options? Is it possible to show the echoed results in HTML file? Maybe with the help of some Javascript?

you could use some JS code to fetch the data from the server after the html page has been loaded. e.g. `$('#body').load('file.php')` using jquery. — Marc B, Jun 20 '13 at 19:11

score 7 · Accepted Answer · edited May 23 '17 at 11:56

You can do this with AJAX. It might look a bit challenging, but it is frankly much simpler than many think. In fact, it's pretty easy.

Ajax goes in your javascript code, and looks like this:

$('#stSelect').change(function() {
    var sel_stud = $(this).val();
    //alert('You picked: ' + sel_stud);

    $.ajax({
        type: "POST",
        url: "your_php_file.php",
        data: 'theOption=' + sel_stud,
        success: function(whatigot) {
            alert('Server-side response: ' + whatigot);
        } //END success fn
    }); //END $.ajax
}); //END dropdown change event

Note that the data from the PHP file comes into your HTML document in the success function of the AJAX call, and must be dealt with there. So that's where you insert the received data into the DOM.

For example, suppose your HTML document has a DIV with the id="myDiv". To insert the data from PHP into the HTML document, replace the line: alert('Server-side response: ' + whatigot); with this:

$('#myDiv').html(whatIgot);

Presto! Your DIV now contains the data echoed from the PHP file.

The ajax can be triggered by a change to an control's value (as in the above example), or just at document load:

$(function() {
//alert('Document is ready');

    $.ajax({
        type: "POST",
        url: "your_php_file.php",
        data: 'Iamsending=' + this_var_val,
        success: function(whatigot) {
            //alert('Server-side response: ' + whatigot);
        } //END success fn
    }); //END $.ajax
}); //END document.ready

Look at this example for ideas on how it works.

Note that the above examples use jQuery, and therefore require this reference in the tags of your page:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

score 1 · Answer 2 · answered Jun 20 '13 at 19:11

1

This will replace the body of the html page with the contents of the url called.

$('body').load( url,[data],[callback] );

answered Jun 20 '13 at 19:11

immulatin

2,118
1
12
13

score 1 · Answer 3 · answered Jun 20 '13 at 19:11

If they can add javascript, an ajax request should do the work...

<script>
var req = new Request({
    method: 'get',  
    url: 'file.php',
    onRequest: function() { // loading image    
    },
    onSuccess: function(response) {
        document.getElementById("destination").innerHTML = response;
    }
}).send();
</script>

They will also need a div for the code to get in:

<div id="destination"></div>

Place PHP results inside HTML page

3 Answers3

Linked