jQuery Ajax在php同一页面上传递值

I am kinda confused on it, when trying to send value on the same page.

当我试图在同一页面上发送价值时，我有点困惑。

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

Well it will display if its in the top of html tag but if its inside the body it will display null.

好吧，如果它位于html标签的顶部，它将显示，但如果它在体内，它将显示为null。

2 个解决方案

#1

Here is the working code for you. To send ajax request to the same page you can keep url parameter empty, which you are already doing. If you are trying to make the script behave differently when $_POST has value then use isset as I have used below.

这是适合您的工作代码。要将ajax请求发送到同一页面，您可以将url参数保持为空，这是您已经在做的。如果你试图让$ _POST有值时脚本的行为不同，那么就像我在下面使用的那样使用isset。

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

#2

You should wrap your code with

你应该用你的代码包装

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

This way, it will only run when the browser finishes processing the structure of your HTML.

这样，它只会在浏览器完成处理HTML结构时运行。

UPDATE

UPDATE

There was a lot of debug stuff on your code, try this (requires Firebug to see the output of the ajax request):

您的代码上有很多调试内容，请尝试此操作（需要Firebug才能查看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>