提交 ajax 表单后，页面会在不应该重新加载时重新加载

我希望投票表单（在索引中.php）无需重新加载页面即可提交，并从索引中的外部页面获取结果.php

.HTML

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script> 
</head>
<div class="polling" id="polling_id">
    <br><br>    
    <form id="poll_form" method="POST" action="process-vote.php" />
    <div class="poll_objects">
        <input type="hidden" name="o1" value="<?php echo $option1; ?>" />
        <input type="hidden" name="o2" value="<?php echo $option2; ?>" />
        <input type="hidden" name="o3" value="<?php echo $option3; ?>" />
        <span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option1;?>" id="radio" /><label for="radio"><?php echo $option1;?></label> </span><br><br>
        <span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option2;?>" id="radio2" /><label for="radio2"><?php echo $option2;?></label></span><br><br>
        <span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option3;?>" id="radio3" /><label for="radio3"><?php echo $option3;?></label></span><br><br>
        <div class="float_buttons">
            <input type="submit" name="submit_vote" value="Vote!" class="button" />
            <input type="submit" name="results" value="Poll Results" class="button"/>
        </div>
    </div>
</div>
</form>

阿贾克斯

<script> 
    $(document).ready(function() {     
        $.ajax({    
            $('#poll_form').submit(function(e) {
                e.preventDefault();
                // note where the e comes from.
                var a = $(this).serialize();
                $("#polling_id").load("poll-results.php");
            });
        });    
    });
</script>

看着这个编码，对我来说似乎一切都是正确的。但是，该页面将打开窗体的操作页面。请提供帮助。

首先，您的代码无法编译，因为您没有执行 ajax 调用，您正在将表单提交传递给对象文本，这将在执行表单提交后导致错误，这就是您的表单重新加载的原因。

<script> 
   $(document).ready(function() { 
      $.ajax({  //this is object literal notation and you are returning a function value to it... doesn't make any sense.
          $('#poll_form').submit(function(e) {
             e.preventDefault();
             // note where the e comes from.
             var a = $(this).serialize();
             $("#polling_id").load("poll-results.php");
          });
      });
   });
</script>

同样，ajax 调用应如下所示：

$.ajax({
  url: "test.html",
  cache: false
})
  .done(function( html ) {
    $( "#results" ).append( html );
  });

看到这个链接，它都在这里。

此外，如果您尝试基于 jquery.load 执行数据加载，则不应执行提交，但您可以在加载请求中发送数据：

$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
  alert( "The last 25 entries in the feed have been loaded" );
});

在这里，您传递的是参数限制，但您可以传递姓名、地址、年龄等。

请参阅此处的加载文档，您无需执行提交。

问候。

只需删除ajax调用并尝试它是否有效

$(document).ready(function() { 
     $('#poll_form').submit(function(e) {
           e.preventDefault();
           // note where the e comes from.
           var a = $(this).serialize();
           $("#polling_id").load("poll-results.php");
     });
}

相关内容

最新更新

热门标签：