Giá trị chuyển tiếp jQuery Ajax trên cùng một trang

Question

Tôi rất bối rối khi cố gắng gửi giá trị trên cùng một trang.

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

Nó sẽ hiển thị nếu thẻ ở đầu thẻ html nhưng nếu bên trong nó sẽ hiển thị rỗng.

Answer 1

Dưới đây là đoạn code làm việc cho bạn. Để gửi yêu cầu ajax đến cùng một trang, bạn có thể giữ trống thông số url mà bạn đang thực hiện. Nếu bạn đang cố gắng làm cho tập lệnh hoạt động khác khi $_POST có giá trị thì hãy sử dụng isset như tôi đã sử dụng bên dưới.

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

Bạn nên quấn mã của bạn với

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

Bằng cách này, nó sẽ chỉ chạy khi trình duyệt kết thúc xử lý cấu trúc HTML của bạn.

CẬP NHẬT

Có rất nhiều debug tòi trên mã của bạn, hãy thử này (yêu cầu Firebug để xem kết quả của yêu cầu 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>