How to call pages by Ajax using javascript

Question

I've a created an Ajax-callback page using my module available as myModule/somepage/%/% - you can see that last two arguments in this page changes dynamically.

I want to make an AJAX call to this page, writing javascript. Say, when I click a button an ajax call will be made to this page (POST method preferably for the two arguments).

I know how to create hyper-links that handle Ajax calls automatically, but in that way links are static, and I can not send arguments to my Ajax-callback page. So how do I write JavaScript to make an Ajax call to my page?

Answer 1

Here is the code to make POST req to a webpage.

$('#yourid').click(function(e) {
    e.preventDefault();
    var theUrl = base_url + 'myModule/somepage';
    $.ajax({
        url: theUrl,
        type: "POST",
        data: "name=John&location=Boston"
        success: function(msg){
        alert(msg);
        $('#displydiv').html(msg);
    }
    });
});

Answer 2

Say, when I click a button an ajax call will be made to this page

If you want a form which has AJAX then you need to look at the FormAPI. This article also explain in quite good detail on how to build AJAX forms. If you want something other than forms then I suggest looking at jQuery API for jQuery.ajax. There's also a shorthand for jQuery.ajax which is jQuery.post.

Answer 3

There is good documentation about FAPI and AJAX:

• AJAX forms in D7
• Examples for Defelopers module