提交表单并在同一页面上显示结果,无需刷新[重复]

Possible Duplicate:
How to have user submit text in form and AJAX it to enter to db and show up on same page?

What I want to do:

index.html -> form submit to some.php -> process data (from index.html) and send data to server.php -> returning results to a index.html div.

I've read ajax, jQuery, I have seen hundreds of questions on this site, but I couldn't figure it out yet.

index.html:

<form action="some.php"  method="post">
    Start date: <br/> <input name="idate" id="firstdate" type="text" /><br />
    End date: <br /> <input name="fdate" id="seconddate" type="text" /><br />
    <br />
    <input type="button" id="searchForm" onclick="SubmitForm();" value="Send" />
</form>

some.php:

<?php
session_start();
$_SESSION['data1'] = $_POST['firstdate'];
$_SESSION['data2'] = $_POST['seconddate'];
?>

 function drawChart() {
    var jsonData = $.ajax({
        url: "server.php",
        dataType: "json",
        async: false
    }).responseText;

    var obj = jQuery.parseJSON(jsonData);
    var data = google.visualization.arrayToDataTable(obj);

(...)

server.php:

$SQLString = "SELECT    
            count(score) as counts,
            DATE(date),
            SUM(CASE WHEN gender = 1 then 1 ELSE 0 END) Male,
            SUM(CASE WHEN gender = 2 then 1 ELSE 0 END) Female,
            AVG(age) as age, score
            FROM persons  
            WHERE date > '".$_SESSION['date1']."' AND date < '".$_SESSION['date2']."' 
            GROUP BY DATE(date) 
            ORDER BY DATE(date) asc";   

(...) 
$data[0] = array('day','counts','Male','Female','Age','Score');     
(...)
echo json_encode($data);

HTML:

<form id="my_form">
    Start date: <br/> <input name="idate" id="firstdate" type="text" /><br />
    End date: <br /> <input name="fdate" id="seconddate" type="text" /><br />
    <input id="submit_form" type="submit" value="Submit">
</form>

<div id="update_div"></div>

jquery:

var submit_button = $('#submit_form');

submit_button.click(function() {

    var start_date = $('firstdate').val();
    var end_date = $('seconddate').val();

    var data = 'start_date=' + start_date + '&end_date=' + end_date;

    var update_div = $('#update_div');

    $.ajax({
        type: 'GET',
        url: 'proccess_form.php',
        data: data,   
        success:function(html){
           update_div.html(html);
        }
    });
});

proccess_form.php:

<?php
    $date1 = GET_['start_date'];
    $date2 = GET_['end_date'];

    // PERFORM THE SQL QUERY //
?>

The process is:

  1. Jquery/Javascript function submits the form to a PHP script using AJAX.
  2. The PHP scripts does something with the data (no need to call to another PHP! just do it all in one)
  3. The PHP script does a echo of the info it wants to return to the first HTML page.
  4. The first HTML page receives the data from PHP in the callback function of AJAX.