How to make an ajax form that adds things to db, and has the same page be updated?

I have a sandbox where I am trying to create a form where a person can add data, and the flow I want is an ajax call that add things to the database, and without refreshing the page, another panel 开发者_开发问答in the original page gets updated with the added information.

How can I pull this off? I currently don't see any such exact examples just by googling.

---

One simple example (jQ). Bind the JS functionName with some event, on click/submit or something else.

function functionName(val1, val2, and so on) {
    $.get('/ServletOrPhpFileOrSomeOther?valueOne=' + val1+ 
         '&valueTwo=' + val2 + 
         '&timestamp=' + $.timestamp(), 

        function(data) {
            //data is the return stuff from you ServletOrPhpFileOrSomeOther
            //do something with it... example
            $('#ElementToUpdate').html(data);
        }
    );
}

On the server side 'ServletOrPhpFileOrSomeOther' compute the values and return someting back. Instead of passing values val1, val2 and so on you can read the form values within the function if you prefer.

I used the timeStamp as a dummy because i had some issues with values not getting updated. You can try without.

---

You can try this url :http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html In join.php, after insert,you can use a select * from tablename and be listed. that you can display a ajax response in another panel of same page.

---

Have a look at agiletoolkit.org - it is a php framework that provides out of the box crud that does exactly what you are looking for - it opens a jquery dialog for edit and add and makes Ajax calls in the background to refresh a grid with the data.