Simple jquery ajax php request

Question

I am doing a basic jquery ajax call on a php file and can't seemsto figure out why it isn't working. Any help is appreciated. Fiebug does not seem to show any ajax or XHR action going on. I want to not to refresh the page and just execute the ajax call. Thanks.

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"</script>
<script>
function getData(url_param){
    $.ajax({
        type: 'get',
        url: 'data.php',
        data: {url_param:url_param},      
        success: function(data) {
            $('#data').html(data);        
        }
    });
};

$('#clickMe').click(function(e){
    e.preventDefault();
    getData(2);
});
</script>

HTML:

<div><a id='clickMe' href='data.php?url_param=url_param'>CLICK ME TO RUN PHP</a></div>
<div id="data"></div>  <!-- divto show result -->

PHP:

<?php

if($_GET['url_param']){
    echo "simple ajax call";
} 

?>

Answer 1

First, you have misspelled your function name ( getGata != getData ).

Secondly:

data: {url_param:url_param}

Are you setting the javascript variable url_param anywhere? The $.ajax data parameter is formatted as follows:

get/post variable name : get/post variable value

As you have it now, it doesn't seem that you are assigning a value to url_param .

Answer 2

you can simply use jQuery post function.

$.post('data.php',{param1:'your param 1', param2 : 'your param 2'}, function(response){
    //do your operation here. response is what you get from data.php. 'json' spicifies that the response is json type
    $("#data").html(response);
},'json');

Answer 3

You have to bind the event inside an onload function. The most common practice is:

$(document).ready(function(){

  $('#clickMe').click(function(e){
       ...
  });

});

You should also add return false; in the last line of your event.

Answer 4

The (amended?) JavaScript prevents your code from working, because you haven't closed the angle brackets on jQuery source, it should be:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

One of the comments states you shouldn't have the href in the anchor, but because you've ignored defaults this isn't triggered (assuming JS is enabled in the user's browser).

Finally, I think that

return false;

should really be inside the function after

getData(2);

but since we're ignoring defaults, the anchor shouldn't make an attempt to go anywhere or reload anyway.