What is correct way to pass data through .ajax() to a PHP script?

I'm attempting to send a piece of data through jQuery .ajax() to a PHP script which will then be loaded into a div container. The PHP script will then run with this piece of data and its contents will be returned into the aforementioned div container.

Initially, I wrote this piece of code (shown below) which successfully added the correct elements upon a click but wasn't able to name them correctly because it didn't doesn't pass the count_bucket variable to the PHP.

    var count_bucket = 4;
    var loadPHP = "create_new_bucket.php";  
    $(".add_bucket").click(function(){
       count_bucket++;
       $("#tree_container2").append( $('<div id="bunch' + count_bucket + '">').load(loadPHP));
       return false;
    });

I then altered the code to this (shown below) in attempt to pass the count_bucket variable t开发者_JAVA百科o the PHP script.

var count_bucket = 4;
$(".add_bucket").click(function () {
    count_bucket++;
    var bucket_add = $.ajax ({
        type: "GET",
        url: "create_new_bucket.php",
        data: var count_bucket, 
        dataType: "json",
        async: false,
    }).responseText;
    $('#tree_container2').append( $('<div id="bunch' + count_bucket + '">').load(bucket_add)); 
});

The PHP file create_new_bucket.php looks like this:

<?php
   include_once "test_functions.php"; // include functions page
   $i = $_GET["count_bucket"]; 
   drawBunchNew($i);
?>

I'm unclear which aspect of the .ajax() is incorrect. I suspect I'm not collecting the variable correctly in the PHP or I'm using the incorrect syntax to pass it to the PHP file. If anyone could help me identify the error, I would greatly appreciate it.

*UPDATE******

Thanks Tejs & Tandu. I'm clear on how to structure the data now but I still am having trouble getting the whole bit of jQuery to work. I took Tandu's suggestion to use .load() instead and have changed my PHP to use POST to pull the data but it's still not working correctly.

var count_bucket = 4;
$(".add_bucket").click(function () {
    count_bucket++;
    var bucket_add = $.load ("create_new_bucket.php", {count_bucket: count_bucket}, }).responseText;
    $('#tree_container2').append( $('<div id="bunch' + count_bucket + '">').load(bucket_add)); 
});

And the PHP is:

<?php
include_once "test_functions.php"; // include functions page
$i = $_POST["count_bucket"]; 
drawBunchNew($i);
?>

Final working jquery I used (final PHP is same as above):

    var count_bucket = 4;
    var loadPHP = "create_new_bucket.php";  
    $(".add_bucket").click(function(){
    count_bucket++;
    $("#tree_container2").append( $('<div id="bunch' + count_bucket + '">').load(loadPHP, {count_bucket: count_bucket}));
    return false;
    });

The data property of the ajax request is going to be an object; think of it like JSON:

{ data: var response }

Is not valid JSON. However, you can do something like this:

data: { myKey: 'myValue', myKey2: 'myValue2' }

Or in your situation:

data: { count_bucket: 4 }

And it will send the data contained in the data property to your server as part of that name value set.

Data for ajax in jQuery needs to be passed as a query-string formatted string ('key[]=value&key[]=value&key[]=value') or as a json object ({key: [value, value, value]}). I believe that the var you have there will be a syntax error. You also need to specify the key, so either data: {count_bucket: count_bucket} or data: 'count_bucket=' + count_bucket should do.

Note that it is not necessary to use .ajax(). It's usually a bit nicer to use .load(), .post(), and .get(). In your case, .load() should work fine. Pass the data as the second argument.

Why do you not want the request to be asynchronous? Note that dataType is the data type of the return value, not of what you are sending. Are you receiving json? jQuery can also usually guess this correctly, and if you set the header on the php side, it helps a lot. The GET type is also the default.

Final note: when using .load(), if you pass the data as a string it will use GET, but if you pass it as an object it uses POST.