jQuery Ajax che passa valore su php stessa pagina

Question

Sono confuso su di esso, quando provo a inviare valore sulla stessa pagina.

<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> 

Bene verrà visualizzato se è nella parte superiore del tag html ma se è all'interno del corpo verrà visualizzato null.

Answer 1

Ecco il codice di lavoro per tu. Per inviare una richiesta Ajax alla stessa pagina è possibile mantenere il parametro url vuoto, cosa che si sta già facendo. Se si sta tentando di fare lo script in modo diverso quando $_POST ha valore, utilizzare isset come si è utilizzato di seguito.

<?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

Si dovrebbe avvolgere il codice con

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

In questo modo, verrà eseguito solo quando il browser termina l'elaborazione della struttura del codice HTML.

UPDATE

C'era un sacco di roba di debug sul vostro codice, provate questo (richiede Firebug per visualizzare l'output della richiesta 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>