Question

I have been racking my brain and searching google for almost the whole day on why this will not work. As an experiment for improving my own site I was checking out a tutorial here http://tutorialzine.com/2009/09/simple-ajax-website-jquery/ most importantly the ajax/jquery section.

Basically, that tutorial’s POST works with page numbers, however I have been trying to convert it to use page names instead. So it would take #!home (hashbangs for implementing google compatibility later) from an href and php could parse it as “home.html” and load that into the content div. For reasons beyond me, it just will not work. I’ll post the relevant sections of code I have attempted to modify in my favour:

From the javascript loader (only the end section which I modified):

var datastring=url.replace('#!','');    //strip the #page part of the hash and leave only the page number

$('#loading').css('visibility','visible');  //show the rotating gif animation

$.ajax({    //create an ajax request to load_page.php
    type: "POST",
    url: "load_file.php",
    data: datastring,   //with the page number as a parameter
    dataType: "html",   //expect html to be returned
    async: false,
    success: function(msg){

        if(parseInt(msg)!=0)    //if no errors
        {
            $('#content').html(msg);    //load the returned html into pageContet
            $('#loading').css('visibility','hidden');   //and hide the rotating gif
        }
    }

});

And the entire php file:

    <?php 
$url = $_POST['datastring'];

if(file_exists(''.$url.'.html'))
echo file_get_contents(''.$url.'.html');

else echo 'There is no such page!';

?>

I wanted to learn on my own and figure this out but honestly I don’t get it :/ There’s no cross domain problem as far as I can tell. Anybody know what I’m missing?
Figured I’d ask here since it’s likely to be more traveled than that tutorial’s site, although if I find a solution I’ll go over there and post it in the comments too so others may avoid my pain. XD

Answer 1

You need to pass your POST data as a key,value pair.

Try changing your data to this:

data: "datastring="+datastring