将ajax数据发布到php，然后获取数据不起作用

Question

i've got some problem

my html: http://jsfiddle.net/dHdnb/

my jquery:

$(".header_nav li a").click(function(){
  var href = this.href;
  $.ajax({
  url: 'dynamic.php',
  type: 'POST',
  data: { target: href },
  success: setTimeout(function(){
           $.ajax({
           url: 'dynamic.php',
           dataType: 'html',
           data: { target: href},               
           success: function(data) {
                    $(".container").html(data)
                    }           
           })
           }, 1000)

})

here is my php code:

<?php
  $target = $_POST["target"];
  echo $target;

  function home(){
  echo $target;
  // some command
  }
  switch($target) {
  case "home": home();
  break;
  // and so on
  default;
  }

  $target = isset($_POST['target']) ? $_POST['target'] : 'default_target_value';
  echo $target;

  echo "Test ajax";
?>

lets me explain this, if the user click the button on those list
then, it will post the target variable into the server
then, the server will process the request and launch a function
finally, when the ajax process success, it will load the data from the server into the container div

my question is, why it's gave me an error like this?
"Notice: Undefined index: target in xxx.php on line 7"
i know there must be something wrong with my data on my ajax,
but i don't know where's my mistakes
please help me :)

when i'm debug it with charles, the ajax send the data with text string like this
my POST request raw:

POST /xxx/dynamic.php HTTP/1.1
Host xxx
Content-Length 67
Accept /
Origin http ://xxx
X-Requested-With XMLHttpRequest
User-Agent xx Content-Type application/x-www-form-urlencoded; charset=UTF-8
Referer http:/xxx.php
Accept-Encoding gzip,deflate,sdch
Accept-Language en-US,en;q=0.8

target=http%3A%2F%2Fxx%2Fxx%2Fhome.php%23product

my POST response raw:

HTTP/1.1 200 OK
Date: Tue, 10 Sep 2013 09:35:19 GMT
Server: Apache/2.4.4 (Win32) OpenSSL/0.9.8y PHP/5.4.16
X-Powered-By: PHP/5.4.16
Content-Length: 57
Content-Type: text/html

http ://xxx.php#productTest ajax

my GET request raw:

GET xxx.php HTTP/1.1
Host: xxx
Accept: text/html, / ; q=0.01
X-Requested-With: XMLHttpRequest
User-Agent: xx
Referer: http ://xxx.php
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

my GET response raw:

HTTP/1.1 200 OK
Date: Tue, 10 Sep 2013 09:45:43 GMT
Server: Apache/2.4.4 (Win32) OpenSSL/0.9.8y PHP/5.4.16
X-Powered-By: PHP/5.4.16
Content-Length: 152
Content-Type: text/html

: Undefined index: target in on line
Test ajax

Answer 1

There is the valid code!

var href = this.href;
        $.ajax({
        url: 'dynamic.php',
        type: 'POST',
        data: { target: href },
        success: function (data) {
                    setTimeout(function (){
                    $(".container").html(data)
                    }, 1000)
                }
        });

you don't need to do the get ajax command, you just need to directly output the data in the success: above! :)

Answer 2

You aren't encoding the data in a format that PHP can decode and populate $_POST with. You are sending a plain text string.

Change:

data: target,

to

data: { target: this.href },

Answer 3

When sending data via AJAX like you are, you have to replicate a form submission, eg

$.ajax(...
   data: 'foo'
);

will send a bare string 'foo' over to the server. But having

$.ajax(...
    data: 'bar=foo'; // key=value pair
    // OR
    data: {bar: 'foo'} // javascript key/value object
);

you'll get the proper data for PHP to populate $_GET/$_POST for you. No key/value pair, no entry in $_GET/$_POST. It's that simple.

Answer 4

Mate in your ajax definition shouldnt you pass the data as array? try changing the data: line with the below, should work for you:

data: { target: the_varibable_you_want_to_pass_by_post }

EDIT: as per your comment and edited OP source and @Arthur answer

 $(".header_nav li a").click(function(){
     var clicked_link = $(this); //the variable stores the refference to the clicked "a" element
        $.ajax({
        url: 'dynamic.php',
        type: 'POST',
        data: { target: clicked_link.href }, //so now you can reffer to the href of the "a"
                 success: $.ajax({
                 url: 'dynamic.php',
                 type: 'POST',
                 data: { target: clicked_link.href },
                 dataType: 'html',                
                 success: function(data){
                 $(".container").html(data)
                 }
        })
      })

In your previous code, the "this" did not reffer to the clicked link but to the ajax object that does not have the 'href' attribute.

Answer 5

The problem is, that you don't send any data when making the secong request:

$(".header_nav li a").click(function(){
  $.ajax({
  url: 'dynamic.php',
  type: 'POST',
  data: { target: this.href }, //i can see the data here
  success: $.ajax({
           url: 'dynamic.php', //notice the same PHP script
           dataType: 'html', // where is the data in this request?               
           success: setTimeout(function(data){
           $(".container").html(data)
           }), 1000)
  })
});

So at first it works, but when performing a second request, PHP can't find the 'target' because you are not sending it.

And it's better to cache the href first:

$(".header_nav li a").click(function() {
    var href = this.href;
    $.ajax({
        url: 'dynamic.php',
        type: 'POST',
        data: {
            target: href //data for first request
        },
        success: $.ajax({
            url: 'dynamic.php',
            dataType: 'html',
            data: {
                target: href //data for the second request
            },        
            success: setTimeout(function(data) {
                $(".container").html(data)
            }),
            1000);
        })
    });
});

Or another solution is to check if the "target" exists in PHP:

<?php
    $target = isset($_POST['target']) ? $_POST['target'] : 'default_target_value';

    function home(){
        // some data like echo and so on
    }

    switch($target) {
      case "home": home();
          break;
          // and so on
          default;
    }
    echo "Test ajax";
?>