使用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 } ?>

Answer 2

Use this,

$(document).ready(function() { 
   $(document).on('submit',"#calculator_form",function(event) {
      event.preventDefault();
      $.get(
         'ajax.php',
         function(ret_data){
            $("#divtoappend").html(ret_data);
         }
      );
   });
}) ;

The original syntax for $.get is,

$.get(
   URL,
   {
        VAR_NAME1:VAL1, 
        VAR_NAME2:VAL2
   },
   function(response){
       // your action after ajax complete 
   }
);

Answer 3

Typo: You have accidentally used $(document).read( instead of $(document).ready(! That will stop your code running.

Note: jQuery has a handy shortcut for the document ready handler:

$(function(){ 
    // your code here
});

Answer 4

I'm not sure if I understand the question correctly, but here is what you can do: Assign some ID or at least the css Class name to the target div and paint the stuff you are getting from AJAX response something like below.

    $(document).ready(function() {
        $("#calculator_form").submit(function(event) {
            event.preventDefault();
            $.ajax({
                url: "Ajax_URL",
                success: function(result) {
                    $("#targetDiv").html(result.one + " " + result.two); //assuming you have assigned ID to the target div.
                }
            });
        })
    })