使用AJAX刷新div

Question

Index.php

...
<form id="calculator_form" name="form" action="" method="get" >
  <input name="one" type="text">
  <input name="two" type="text">
  <input type="submit">
</form>
...
<!-- refresh area -->
<?php if(isset($_GET["one"])) { ?>
<div>
  <?php echo $_GET["one"] . " " . $_GET["two"]; ?>
</div>
<?php } ?>
<------------------->

I would like to submit the form and reload the refresh area indicated above. I know this can be achieved by using AJAX but I'm not quite sure how.

I have tried putting the refresh area in a separate ajax.php file and using JQuery but it didn't work;

$(document).ready(function() { 
   $("#calculator_form").submit(function(event) {
      event.preventDefault();
      $("#divtoappend").load("ajax.php", data);
   })
}) 

I've also tried using $.get() but to no avail.

I'm able to send the data back and forth to a seperate php page but I'm stuck trying to achieve what I am looking for.

EDIT:

The code that I posted was quickly written and the syntax isn't the issue in question, I'm merely wondering how I can refresh a <div> under the form so that it will once again do the if(isset($_GET["one"])) check and print the updated php variables.

EDIT 2:

My code is now as follows:
Index.php

...
<form id="calculator_form" name="form" action="" method="get" >
  <input name="one" type="text">
  <input name="two" type="text">
  <input type="submit">
</form>
...
<div id="append">
  <!-- where I want the ajax response to show -->
</div>
...

ajax.php

<?php if(isset($_GET["one"])) { ?>
<div>
   <?php echo $_GET["one"] . " " . 4_GET["two"]; ?>
</div>
<!-- assume there's n number of divs -->
<?php } ?>

Now I want the ajax.php div to append to the #append div in index.php. There has to be a better way than altering the ajax.php and using echo:

ajax.php (with echo)

 <?php 
 if(isset($_GET["one"])) { 
    echo "<div>". $_GET["one"] . " " . $_GET["two"] . "</div>";
 } 
 ?>

So, as ajax.php could be very large, is there a better solution than just echoing data from ajax.php to index.php?

Answer 1

Now this can be done in many ways.. One of them is Following.. Try this:

Index.php file

<form method="get" id="calculator_form">
  <input name="one" type="text" id="one">
  <input name="two" type="text" id="two">
  <input type="submit" name="submit">
</form>

<div class="result"></div>

<script type="text/javascript">
$(document).ready(function(){
    $("#calculator_form").on('submit', function(event){
        event.preventDefault();

       var one = $('#one').val(); // Taking value of input one
       var two = $('#two').val(); // Taking value of input two

       $.get( "ajax.php", { one:one, two:two }). done( function( data ) {

          $('.result').html(data); // Printing result into result class div
        });

    });
});
</script>

ajax.php

<?php if(isset($_GET["one"])) { ?>
<div>
  <?php echo $_GET["one"] . " " . $_GET["two"]; ?>
</div>
<?php } ?>