embedded "send comments" form that doesn't refresh

Each footer of any page on my website (LAMP app) has a small form where users can leave comments. The form has a few fields and a "send" button. To the right of the send button I am projecting an image saying something "we'll get back to you" in nice cursive writing.

Ideally I'd like Users to fill in the form, click send, and just have the image be replaced with another image saying something like "thank you.." and the application to e-mail a pre-defined e-mail add开发者_如何学JAVAress the content of that form. I'd like that to occur without a page-reload and without the user losing his/her scrolled viewport onto the web page.

I know PHP has functions to send e-mail, but those are really reliant on POSTing the form with the content, thus- reloading and the sending is done on the server side of course. But here, without page-reload.

I know of AJAX, allowing me to send requests to the server. Is that how it's done? have a page on the server that's never really visible to users and have AJAX just invoke a request to it from the user-form once "send" is done? that page will be executed on the server side but never return a new page or force a navigation outside of where the user is now?

I don't need a line by line breakdown, but if someone can just point me in the right direction as to how something like that can be achieved, i'd do the technical research myself as for the implementation.

You would have ajax post to a php function with the data from the form, and the success callback for the ajax would replace the image.

Something like

$.ajax({
    url: "send_comments.php",
    data: { email: $("#email").value() },
    success: function(data) {
        $(".comments img").html(/* new image html */);
    })
});

This is assuming you have jQuery available.