HTML标签中的JSON和CodeIgniter - JSON and CodeIgniter in HTML tags

JSON and CodeIgniter in HTML tags

本文关键字：CodeIgniter JSON 标签 HTML | 更新日期: 2023-09-27

我正在尝试使用CodeIgniter和JSON创建一个私人聊天室。我希望返回的JSON数据被放在一个列表，如<ul><li>messageinJSON</li></ul>。这将允许我设计用户聊天消息的样式。我已经尝试了我在SO上看到的不同方法，但没有一个例子完全符合我的需求。

我的控制器:

         public function get_chats() {
            $this->load->model('pchat_model');
            $this->pchat_model->create_table();
            echo json_encode($this->pchat_model->get_chat_after($_REQUEST["time"]));
            return;
         }

我的JS:

 var addDataToReceived = function(arrayOfData) {
        arrayOfData.forEach(function(data) {
            $("#received").val($("#received").val() + "'n" + data[0]);
        });
    }

     var getNewChats = function() {
            $.getJSON("pchat/get_chats?time=" + time, function(data) {
                addDataToReceived(data);
                setTimeout(function() {
                    $('#received').animate({scrollTop:$('#received')[0].scrollHeight}, 3000);
                }, 0);
                time = data[data.length - 1][1];
            });
        }

UPDATE: getNewChats在(文档)中调用。Ready函数

$(document).ready(function() {
        $("form").submit(function(evt) {
            evt.preventDefault();
            var data = $("#text").val();
            $("#text").val('');
            sendChat(data, function() {
                alert("dane");
            });
        });
        setInterval(function() {
            getNewChats(0);
        }, 5500);
    });

在JS中getNewChats函数调用应该看起来像这样

function getNewChats(time){
    $.get("pchat/get_chats?time=" + time, function(data){
        console.log(data); //Dumping your JSON data out into browser console window. You can replace it with your unordered list here.
    }, 'json');
}

所以在上面的JS代码的例子中，我们所做的是问你的PHP脚本的数据。你会注意到$。get函数调用我有一个'json'在它的末尾。这是为了告诉jQuery GET命令期望看到JSON数据返回。

从那里您的JSON数据被转储到您的浏览器控制台。更新:

好的，为了更清楚，我添加了一个JSFiddle来向您展示它如何基于您的文档工作的示例。准备函数调用。使用该代码，您可以通过向无序列表添加适当的类名来对其进行样式化。可以将函数包装在var中，也可以不包装。这取决于你自己的编码风格。

http://jsfiddle.net/JqXea/

请注意，此示例仅显示随机数。