javascript - 在ajax调用中使用jquery刷新div

Question

我有一个 div，其中有 foreach，如下所示:

<div id="conversation">
   <?php foreach($singles as $question): ?>
     <div class="well well-sm">
       <h4><?php echo $question['question_title']; ?></h4>
     </div>
     <div class="bubble bubble--alt">
       <?php echo $question['question_text']; ?>
     </div>
   <?php endforeach; ?>
   <?php foreach($information as $answer): ?>
     <div class="bubble">
       <?php echo $answer['answer_text']; ?>
     </div>
   <?php endforeach; ?>
 </div>

我还有一个表格可以输入新答案:

<form method="post" style="padding-bottom:15px;" id="answerForm">
    <input type="hidden" id="user_id" value="<?php echo $_SESSION['user_id']; ?>" name="user_id" />
    <input type="hidden" id="question_id" value="<?php echo $_GET['id']; ?>" name="question_id" />
    <div class="row">
      <div class="col-lg-10">
        <textarea class="form-control" name="answer" id="answer" placeholder="<?php if($_SESSION['loggedIn'] != 'true'): ?>You must be logged in to answer a question <?php else: ?>Place your answer here <?php endif; ?>" placeholder="Place your answer here" <?php if($_SESSION['loggedIn'] != 'true'): ?>disabled <?php endif; ?>></textarea>
      </div>
      <div class="col-lg-2">
        <?php if($_SESSION['loggedIn'] != 'true'): ?>

        <?php else: ?>
          <input type="submit" value="Send" id="newAnswer" class="btn btn-primary btn-block" style="height:58px;" />
        <?php endif; ?>
      </div>
    </div>
  </form>

我正在通过 ajax 提交表单，并且想要 div #conversation每次用户提交问题答案时刷新并重新加载。现在我有以下ajax代码:

<script type="text/javascript">
  $("#newAnswer").click(function() {
    var answer = $("#answer").val(); 
    if(answer == ''){
      $.growl({ title: "Success!", message: "You must enter an answer before sending!" });
      return false;
    }
    var user_id = $("input#user_id").val();
    var question_id = $("input#question_id").val();
    var dataString = 'answer='+ answer + '&user_id=' + user_id + '&question_id=' + question_id;
    $.ajax({  
      type: "POST",  
      url: "config/accountActions.php?action=newanswer",  
      data: dataString,  
      success: function() {  
         $.growl({ title: "Success!", message: "Your answer was submitted successfully!" });
         $("#answerForm").find("input[type=text], textarea").val("");
         $("#conversation").hide().html(data).fadeIn('fast');
      }  
    }); 
    return false;  
  });

</script>

你会注意到我已经尝试过 $("#conversation").hide().html(data).fadeIn('fast');但它没有成功完成这项工作。它只是重新加载通过ajax传递到div中的信息，而不是仅仅重新加载foreach。

如何刷新 div 或 <?php foreach(); ?>在ajax调用的成功函数中？

Answer 1

米奇，我正在看这一部分:

  success: function() {  
     $.growl({ title: "Success!", message: "Your answer was submitted successfully!" });
     $("#answerForm").find("input[type=text], textarea").val("");
     $("#conversation").hide().html(data).fadeIn('fast');
  } 

看到表达式“.html(data)”？？？ “数据”在哪里声明？上面的代码永远不会工作。现在，看看下面的几行。特别是第一个。看到我的改变了吗？

  success: function(data) {  
     $.growl({ title: "Success!", message: "Your answer was submitted successfully!" });
     $("#answerForm").find("input[type=text], textarea").val("");
     $("#conversation").hide().html(data).fadeIn('fast');
  } 

完成此更改后，您需要使用调试器(chrome 或其他调试器)来检查 ajax 调用(我们这里没有)返回的内容是否是您所需要的。但首先，修复错误。

祝你好运。