Question

我有一个民意调查问题清单（带有不同的ID）以及选项。当我提交民意调查选项时，我得到了一个AJAX回复。

我想使用此响应在没有页面刷新的情况下立即发布结果，但是使用成功的ajax数据完全替换相同轮询问题的html。

具体来说，我的问题是提交民意调查答案如何将问题（html）更改/删除到包含答案的新html（不同的html）。只有相关民意调查的html才能改变所有民意调查的html。我成功获得了ajax成功回调。

这是代码：

PHP：

    <?php if(isset($GLOBALS['questions']) && is_array($questions)): ?>
    <?php foreach($questions as $key => $question): ?>
        <?php require 'poll.php'; ?>
        <?php $user = Subscribers::getSubscriber($question->userID); ?>
        <li class="comment-holder" id="_<?php echo $question->id; ?>">
            <div class="user-img">
                <img src="<?php echo $user->profile_img; ?>" class="user-img-pic" />
            </div>
            <div class="comment-body">
                <h3 class="username-field"><?php echo $user->username; ?></h3>

                <div class="comment-text">
                    <?php echo $question->question; ?>
                    <hr />
                </div>
            </div>

<!--Relevant part: display choices -->
            <div class="poll-option">

                <?php if($completed):?>
                    <div id="completed">
                    <p>You have completed this poll, thanks.</p>
                    <!--**This is where ajax response should appear**-->
                    </div>

                <?php else: ?>

                    <?php if(!empty($opts)): ?>

                        <div class="poll-options">


                                    <?php
                                        $TypeOfPoll = $question->pollType;
                                        switch($TypeOfPoll) {
                case "option1":
                                         foreach($opts as $index => $opt) {
                                             if ($opt->id == $question->id) {
                                                 echo "<input type='radio' name='choice' value='$opt->choice_id' />";
                                                    echo $opt->name,'<br />';
                                             }}
                                        echo "<input type='submit' value='Submit' id='$question->id' class='submitPoll' />";
                                                    break;
                case "option2":
                                      echo 'Option 2';

                                        break;

                case "option3":
                                        echo 'Option 3';
                                        break;
                case "option4":
                                        echo 'Option 4';
                                        break;
                default:
                                        foreach($opts as $index => $opt) {
                                        if ($opt->id == $question->id) {
                                            echo '<input type="radio" name="choice" value="<?php echo $opt->choice_id; ?>" />';
                                            echo $opt->name,'<br /><br />';
                                        }}
                                        echo "<input type='submit' value='Submit' id='$question->id' class='submitPoll' />";

                                        break;
                                            }
                                        ?>

                        </div>

                <?php else: ?>
                    <p>No choices available!</p>
                    <?php endif; ?>
                <?php endif; ?>
            </div>

            <div class="comment-buttons-holder">
                <ul>
                    <li id="<?php echo $question->id; ?>" class="delete-btn">X</li>
                </ul>
            </div>

        </li>
    <?php endforeach; ?>
<?php endif; ?>

的Ajax：

    $(document).ready(function() {
        add_submitPoll_handlers();
    });

    function add_submitPoll_handlers() {
        $('.submitPoll').each(function() {
// 'submitPoll' is class for submit button
            var btn = this;
            $(btn).click(function() {
                var ChoiceAnsVal = $('input:radio[name=choice]:checked').val();
                var userId = $('#userId').val();
                var id = btn.id;
                console.log('user:'+userId+'poll:'+btn.id+'choice:'+ChoiceAnsVal);
                submit_poll(userId, id, ChoiceAnsVal);
            });
        });
    }

    function submit_poll(userId, id, ChoiceAnsVal) {
    $('.submitPoll').click(function() {
        $.post("ajax/submit_poll.php",
            {
                task:"submit_poll",
                userId: userId,
                poll_id: id,
                choice_id:ChoiceAnsVal
            }
        ).error(
            function() {
                console.log("Error in script.js")
            }
        ).success(
            function(data) {
                $('#completed').html('You have completed the poll!');//not working
                //console.log("ResponseText:" + data); //I'm getting the     //response
            }
        );
    });

Answer 1

Ajax完全是为上述目的而设计的。但为此，我建议使用jQuery + AJAX。这将是一个简单的方法。由于您还没有提供代码，我无法为您提供所需的确切代码。代码将是这样的

<强> HTML

<div id="question_id">html</div>

<强> Jquery的

$(selector).something(function(){
   var id=$(this).id; //assuming this will be the id of question that is selected
 $.ajax({
   url:url. //url to which data to be submitted
   type:post,
   data: //data to be submitted
   success:function(data){
      //data will be page/data that returned by the server page
      $(selector).html(html_daya);// you can create html string that to replaced and pass it as argument to html function
    }
 });
});

请参阅http://api.jquery.com/jquery.ajax/以获取完整的文档。

如何使用ajax成功回调数据更改以前的html（部分）？

1 个答案: