Question

当我试图在同一页面上发送价值时，我对此感到困惑。

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

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

Answer 1

这是您的工作代码。要将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>

Answer 2

你应该用

包装你的代码

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

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

<强>更新

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

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

2 个答案: