Question

我希望投票表单（在index.php中）在没有页面重新加载的情况下提交并从index.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>

的Ajax

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

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

Answer 1

首先你的代码没有编译，因为你没有进行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 );
  });

请看这个链接全是here。

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

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

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

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

问候。

Answer 2

只需删除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");
     });
}

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

2 个答案: