Question

嗨，我有这个特定的div，即“你有1条消息”，如果用户发送消息将会增加，如果我收到消息，我希望如果没有刷新页面，它将显示给某个div“你有2条消息“我已经有了后端代码。它工作但只有我希望在ajax中只有某个div才会刷新整个页面。如何使用codeigniter获得响应？下面是我的代码

 $this->data['getNumberOfMessages'] = $this->mm->getNumberOfMessages($this->data['id']);


    $this->data['countNumber'] = $this->data['getNumberOfMessages'];

   $response = array(
              'status'=>'ok',
              'StatusMessages'=>$this->data['countNumber']

            );
      //print_r($response);
       $this->output

            ->set_output(json_encode(array($response)));

我的观点

<tr>
                    <th>
                    <a href="#" id="<?php echo $id; ?>" data-messageid="<?php echo $id; ?>" data-href="<?php echo base_url().'messages'?>" title="messages">
                    You have 
                    <span class="badge"><?php echo $countNumber; ?></span>
                    message(s)</a>
                  </th>

和我的jquery ajax代码

<script type="text/javascript">
  $(document).ready(function(){
     var id =$(this).data("messageid");
      $.ajax({
        type: "get",
        url: $(this).data("href"),
         data: {
          messageId : id,
          userId : "<?php echo $id; ?>"
        },                  
        success: function(data){
          alert(data.StatusMessages );
          $("#" + id).html("<?php echo 'You have ' ?>:" + data.StatusMessages + "messages");

        }
      });
  });
</script>

并且我注意到在我的警报中它是未定义的。我认为没有数据通过。有人帮我解决这个问题吗？我已经被困在这里3天了。非常感谢任何帮助。

Answer 1

您的HTML看起来很好，您的PHP代码尝试按如下方式编辑，以创建一个对象而不是数组：

$this->data['getNumberOfMessages'] = $this->mm->getNumberOfMessages($this->data['id']);
$this->data['countNumber'] = $this->data['getNumberOfMessages'];

$responseOnject = new stdClass();
$responseOnject->status = 'ok';
$responseOnject->StatusMessages=$this->data['countNumber'];

$this->output->set_output(json_encode($responseOnject));

然后在你的jQuery AJAX＆＃39; （实际上是Javascript）代码，替换[我不知道你为什么在这里有PHP回声]：

$("#" + id).html("<?php echo 'You have ' ?>:" + data.StatusMessages + "messages");

使用：

$("#" + id+ ' span.badge').html(data.StatusMessages);

还要为AJAX提供一个合适的URL来代替这个：

url: $(this).data("href"),

祝你好运：）

Answer 2

首先，setInterval定期更新消息。

<script type="text/javascript">
var autoLoad; 
$(document).ready(function(){
    var id =$(this).data("messageid");
    autoLoad = setInterval(function(){loadAjax(id);}, 4000);
    //That means you will request to get your message each 4 seconds.
});
function loadAjax(id)
{
  $.ajax({
    type: "get",
    url: $(this).data("href"),
    dataType: "JSON",
    data: {
      ajax: "yes"
    },     
    success: function(data){
      alert(data);
      console.log(data.StatusMessages);
      //$("#" + id).html("<?php echo 'You have ' ?>:" + data.StatusMessages + "messages");
      $("#" + id + ' span.badge').html(data.StatusMessages);
    }
  });
}
</script>

在服务器上，您只需返回以下内容：

$responseOnject = new stdClass();
$responseOnject->status = 'ok';
$responseOnject->StatusMessages=$this->data['countNumber'];


if ($this->input->get("ajax") == "yes")
{
    echo json_encode($responseOnject);
    exit;
    //If you don't exit right here. It will return all your page back to browser
    //This section is just for ajax request
}

我将如何使用ajax来执行某个div，该ajax仅使用codeigniter加载到某个div上

2 个答案: