通过POST发送jquery变量

Question

I'm kinda new with jQuery's AJAX functions. I'm having a problem, this my function, its on a file head_menu.php, thats is included on the index.php file.

HTML:

<a class="dock-item" href="index.php"  class="post" id="menu01"><img src="images/home.png" alt="home" /><span>Home</span></a>`
<a class="dock-item" href="index.php"  class="post" id="menu02"><img src="images/home.png" alt="home" /><span>Create Users</span></a> `

JQUERY:

$(document).ready(function() {
    $("#menu01").click(function(event){
        $.post( 
        "index.php",
        { menu: "main.php" },
        this.html(data);
        }

    );
    $("#menu02").click(function(event){
        $.post( 
        "index.php",
        { menu: "create_users.php" },
        this.html(data);
        }

    );
    });

I'm just trying to send a post variable menu, to the index.php page to change the sidebar menu, this when we click on Home or Create Users. In the index.php I have this.

$menu = $_REQUEST['menu'];

How do I do this.

Answer 1

data index is holding data sent to the server. You could do that:

<a class="dock-item" href="create_users.php" class="post"><img src="images/home.png" alt="home" /><span>Home</span></a>

<a class="dock-item" href="main.php" class="post"><img src="images/home.png" alt="home" /><span>Create Users</span></a>

 $("a.post").click(function(event){
        $.ajax( 
        url: "index.php",
        data: { menu: $(this).attr("href") },
        success: function(data) {
            $('selector').html(data);
        }
    );
     event.preventDefault();
     return false; /* Dont do what you have to do , dont go to href */
    });

Or change href back to index.php and put variable in any attribute you want. Maybe

id="create_users"
id="main" 

and

 data: { menu: $(this).attr("id") + ".php" },

Answer 2

<a class="dock-item" href="index.php" class="post" id="menu01"><img src="images/home.png" alt="home" /><span>Home</span></a>

<a class="dock-item" href="index.php" class="post" id="menu02"><img src="images/home.png" alt="home" /><span>Create Users</span></a>

<script>
$.customPOST = function(data,callback){
  $.post('index.php',data,callback,'json');
}

$(document).ready(function() {
    $("#menu01").click(function(){
        $.customPOST({menu: "main.php",function(response){
         //server will return an OBJECT called "response"
         //in "index.php" you will need to use json_encode();
         //in order to return a response to the client
         //json_encode(); must have an array as argument
         //the array must be in the form : 'key' => 'value'
         //on the server side you will have $_POST['menu'}
        });
        return false;
    });

    $("#menu02").click(function(){
        $.customPOST({menu: "create_users.php",function(response){
         //server will return an OBJECT called "response"
         //in "index.php" you will need to use json_encode();
         //in order to return a response to the client
         //json_encode(); must have an array as argument
         //the array must be in the form : 'key' => 'value'
         //on the server side you will have $_POST['menu'}
        });
        return false;
    });

});
</script>