Place PHP results inside HTML page

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?

Answers:

Answer

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>
Answer

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

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

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.