Get done a php file with a simple click with jquery

Question

I am Totally Newbie, i just want a very very simple example for my question.

Think i have this piece of PHP code :

<?php
echo "Test";
?>

And a piece of jquery like this :

$(document).ready(function() {
$('.div').click(function(){

$('.loading').show();
// DO PHP NOW
$('.loading').hide();

});
});

And HTML :

<div class="div">Click here</div>

I want a simple code , to connect Jquery to PHP file.

When the .div clicked, then php code get happen with No refreshing the page. Just this.

How should i do this ?

(i need a simple way to ajaxify a PHP !)

+ If i want to do Ajax, i have to write code for every every PHP code i write or one piece of Ajax code for ALL PHP codes ?

thanks

Answer 1

If you want to display some value from php in your div use $(".div").load("/url/to/your/php"); Or use

$.post("url/to/php",{val:val,val:val},function(callback){ 
     alert("callback");
     $(".div").html(callback);
}

Or AJAX

$.ajax({
  url: "/php/code/sd.php",
  type: "POST",
  date: {
        username: "asdasd",
        password: "asdasd"
       },
  success: function(callback){
          $(".div").html(callback);
    }
  });

Answer 2

$(function() {
    $('.div').click(function(){
        var $this = $(this);
        $('.loading').fadeIn(200);
        $.ajax({
            url: 'url_to_your_file.php',
            type: 'GET',
            data: {},
            success: function(data) {
                //do smthing OR
                $(data).insertAfter($this);
            },
            error: function(e) {
                //do smthing when error
                alert('Error happen!');
                console.log(e);
            },
            complete: function(data) {
                $('.loading').fadeOut(200);
            }
        });
    });
});