jQuery Ajax que pasa el valor en php misma página

Question

Estoy un poco confundido cuando trato de enviar valor en la misma página.

<script> 
     $("select[name='sweets']").change(function() { 
     var str = ""; 
     $("select[name='sweets'] option:selected").each(function() { 
      str += $(this).text() + " "; 

      }); 

      jQuery.ajax({ 
      type: "POST", 
      data: $("form#a").serialize(), 

      success: function(data){ 
       jQuery(".res").html(data); 

       $('#test').text($(data).html()); 


      } 
      }); 
      var str = $("form").serialize(); 
      $(".res").text(str); 
    }); 
    </script> 
<div id="test"> 
<?php 
    echo $_POST['sweets']; 
    ?> 
    </div> 
<form id="a" action="" method="post"> 
    <select name="sweets" > 
    <option>Chocolate</option> 
    <option selected="selected">Candy</option> 
    <option>Taffy</option> 
    <option>Caramel</option> 
    <option>Fudge</option> 
    <option>Cookie</option> 
</select> 
</form> 

Bien se mostrará si es en la parte superior de la etiqueta html, pero si es el interior del cuerpo se mostrará nula.

Answer 1

Aquí está el código de trabajo para tú. Para enviar una solicitud ajax a la misma página, puede mantener el parámetro url vacío, que ya está haciendo. Si intenta hacer que el script se comporte de manera diferente cuando $_POST tiene valor, entonces use isset como he usado a continuación.

<?php 
    if(isset($_POST['sweets'])) 
    { 
    echo $_POST['sweets']; 
    exit; 
    } 
    ?> 

    <script> 
     $(function(){ 
      $("select[name='sweets']").change(function() { 
      var str = ""; 
      $("select[name='sweets'] option:selected").each(function() { 
       str += $(this).text() + " "; 

       }); 

       jQuery.ajax({ 
       type: "POST", 
       data: $("form#a").serialize(), 

       success: function(data){ 
        jQuery(".res").html(data); 

        $('#test').html(data); 


       } 
       }); 
       var str = $("form").serialize(); 
       $(".res").text(str); 
     }); 
     }); 
     </script> 


<div id="test"> 

    </div> 

<form id="a" action="" method="post"> 
    <select name="sweets" > 
    <option>Chocolate</option> 
    <option selected="selected">Candy</option> 
    <option>Taffy</option> 
    <option>Caramel</option> 
    <option>Fudge</option> 
    <option>Cookie</option> 
</select> 
</form> 

Answer 2

Usted debe envolver su código con

$(document).ready(function(){ 
    // your code here 
}); 

De esta manera, sólo se ejecutará cuando el navegador se termina de procesar la estructura de su HTML.

ACTUALIZACIÓN

Había un montón de cosas de depuración en el código, prueba este (requiere Firebug para ver la salida de la solicitud Ajax):

<script> 
$(document).ready(function(){ 
    $("select[name='sweets']").change(function() { 
     jQuery.ajax({ 
      type: "POST", 
      data: $("form#a").serialize(), 
      success: function(data) { 
       // Check the output of ajax call on firebug console 
       console.log(data); 
      } 
     }); 
    }); 
}); 
</script>