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

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>

阿贾克斯

<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 );
  });

看到此链接，就在这里。

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

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

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

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

问候。

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 个解决方案

解决方案1
1 2014-01-11 23:25:05

解决方案2
0 2014-01-11 23:23:02

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

问题描述

2 个解决方案

解决方案1 1 2014-01-11 23:25:05

解决方案2 0 2014-01-11 23:23:02

解决方案1
1 2014-01-11 23:25:05

解决方案2
0 2014-01-11 23:23:02