显示投票结果代替投票区域

Showing poll results in place of the poll area

本文关键字：区域 结果 显示      更新时间：2023-09-26

我正在尝试在不重新加载整个页面的情况下显示与投票问题相同的区域和页面的民意调查结果。我能够获得结果并在新页面中显示它们，但我不知道如何替换我有问题的 html 并将其替换为带有结果的 html。

HTML （带有投票问题）

<div id="poll-area">
    <!-- Voting poll -->
    <fieldset>
        <form action="javascript:void(0);" id="pollid" name="myform" method="POST">
            <label><input type="radio" name="answerswer" value="left" id="option_left" />Yes</label>
            <label><input type="radio" name="answerswer" value="right" id="option_right" />No</label>
            <input type="submit" name="submit" id="submit" value="Vote" />
            <input type="hidden" name="id" value="pollid" />
        </form>
    </fieldset>
    <!-- End voting poll -->
</div>

用于处理轮询的 AJAX 调用：

var $j = jQuery.noConflict();
jQuery(document).ready(function($j) {
    $j("form").submit(function(){
        var str = $j(this).serialize();
        $j.ajax({
            url: "poll_vote.php",
            type: "POST",
            data: str,
            cache: false,
            success: function(result) {
                window.location.replace("poll_results.php");
            }
        });
        return false;
    });
});

我猜我想用poll_results.php中的 #poll 区域替换 #poll 区域内的 HTML 而不是 *window.location.replace（"poll_results.php"）*，但我不知道该怎么做。

投票结果的 HTML（包含在poll_results.php中的内容）

<div id="poll-area">
   <fieldset>
       <legend>Results</legend>
       <ul>
           <li>
               <span class="total-votes">Yes</span>
               <br />
               <div class="results-bar" style="width:52%;">
                 52%
               </div>
           </li>
           <li>
               <span class="total-votes">No</span>
               <div class="results-bar right-bar" style="width:48%;">
                 48%
               </div>
           </li>
           <li>
       </ul>
       <p>Total votes: 100</p>
   </fieldset>
</div>

感谢您的帮助！

在 poll_results.php 的输出中，您可以删除 ID 为 "poll-area" 的外部div。当它被拉入当前页面时，您不希望出现重复的 ID。

对于您的jQuery，这应该可以解决问题：

success: function(result) {
    $j("#poll-area").html(result);

据我所知，当前在投票区div 内退出的任何内容都将被 ajax 查询的结果覆盖。（投票选项应消失，结果将显示）

编辑（注释摘要）：poll_vote.php应输出包含在poll_results.php中的 HTML

最简单但不是最干净的：使用 innerhtml 和 getElementById（）

你会得到类似的东西：

var div = getElementById('poll-area'); //The poll itself
div.innerHtml = getElementbyId('answers'); //The answers

请注意，我使用"答案"作为 ID，因为您对答案和投票使用相同的 ID。所以你会得到一个嵌套的，这是行不通的。给你的第一个孩子答案（）一个新的id，称为"答案"。

如果你对javascript有更多的了解，请使用createElement添加一个新元素。这将提高速度并且更好，但更先进一些。

相关文章：