小javascript / ajax / mysql聊天

时间:2013-07-27 12:03:17

标签: javascript ajax json

对于我的网站,我想要一个小聊天/支持字段。目前我可以编写并将其保存到数据库中。

但我希望拥有它,如果我再次打开该网站,旧文本将来自数据库。但是最好的方法是怎样做的呢?我还认为我的Array是假的,因为我只从数据库中获取一个而不是所有数据。

我的javascript测试代码:

    initChat: function () {

                var cont = $('#chats');
                var list = $('.chats', cont);
                var form = $('.chat-form', cont);
                var input = $('input', form);
                var btn = $('.btn', form);

                var handleClick = function (e) {
                    e.preventDefault();

                    var text = input.val();
                    if (text.length == 0) {
                        return;
                    }

                    var time = new Date();
                    var time_str = time.toString('dd.MM.yyyy - H:mm')+ " Uhr";
                    var tpl = '';
                    tpl += '<li class="out">';
                    tpl += '<img class="avatar" alt="" src="assets/img/avatar.png"/>';
                    tpl += '<div class="message">';
                    tpl += '<span class="arrow"></span>';
                    tpl += 'Meine Frage&nbsp;';
                    tpl += '<span class="datetime">vom ' + time_str + '</span>';
                    tpl += '<span class="body">';
                    tpl += text;
                    tpl += '</span>';
                    tpl += '</div>';
                    tpl += '</li>';

                    var msg = list.append(tpl);

                    var time_str_new = time.toString('yyyy-MM-dd H:mm:ss');             

                    $.ajax({                                      
                    type: "POST",                                    
                    url: '../support.php',
                    data: {datum: time_str_new, text: text},
                    dataType: 'json',
                    success: function(data)
                    {
                    input.val("");
                    }
                    });

                    $('.scroller', cont).slimScroll({
                        scrollTo: list.height()
                    });
                }

我的php测试脚本:

$kundenid = KUNDENID;

$query = "INSERT INTO support set datum = '$datum', kunde = '$kundenid', text = '$text', typ = 'kunde'";
$result = mysql_query($query,$db);

$querysup = "SELECT id, datum, kunde, text, typ FROM support WHERE kunde = '$kundenid'";
$resultsup = mysql_query($querysup,$db);

while($rowsup = mysql_fetch_array($resultsup)) {
$datum = $rowsup['datum'];
$text = $rowsup['text'];
$typ = $rowsup['typ'];

$data = array("datum"=>$rowsup['datum'], "text"=>$rowsup['text'], "typ"=>$rowsup['typ']);
}

echo json_encode($data);

好的,我现在有了这段代码。如果我发布一个新文本,它会显示数据库中的所有帖子。但是我需要它来自mysql的数据在我的第一篇帖子之前仍然存在。

    initChat: function () {

        var cont = $('#chats');
        var list = $('.chats', cont);
        var form = $('.chat-form', cont);
        var input = $('input', form);
        var btn = $('.btn', form);

        var handleClick = function (e) {
            e.preventDefault();

            var text = input.val();
            if (text.length == 0) {
                return;
            }

            var time = new Date();
            var time_str = time.toString('dd.MM.yyyy - H:mm')+ " Uhr";
            var tpl = '';
            tpl += '<li class="out">';
            tpl += '<img class="avatar" alt="" src="assets/img/avatar.png"/>';
            tpl += '<div class="message">';
            tpl += '<span class="arrow"></span>';
            tpl += 'Meine Frage&nbsp;';
            tpl += '<span class="datetime">vom ' + time_str + '</span>';
            tpl += '<span class="body">';
            tpl += text;
            tpl += '</span>';
            tpl += '</div>';
            tpl += '</li>';

            var msg = list.append(tpl);

            var time_str_new = time.toString('yyyy-MM-dd H:mm:ss');             
            $.ajax({                                      
            type: "POST",                                    
            url: 'support.php',
            data: {datum: time_str_new, text: text},
            dataType: 'json',
            success: function(data)
            {
            var myArray = data;
            for (var i = 0; i < myArray.length; i++) {

            var datum = new Date(myArray[i].datum);

            var tpl = '';
            tpl += '<li class="out">';
            tpl += '<img class="avatar" alt="" src="assets/img/avatar.png"/>';
            tpl += '<div class="message">';
            tpl += '<span class="arrow"></span>';
            tpl += 'Meine Frage&nbsp;';
            tpl += '<span class="datetime">vom ' + datum.toString('dd.MM.yyyy - H:mm:ss')+ ' Uhr' + '</span>';
            tpl += '<span class="body">';
            tpl += myArray[i].text;
            tpl += '</span>';
            tpl += '</div>';
            tpl += '</li>';
            var msg = list.append(tpl);
            }
            }
            });

1 个答案:

答案 0 :(得分:0)

  

但是如何将它从数组加载到我的javascript ...所以如果我刷新页面,数组中的值就在我的“Chatbox”中

缺少的部分可能是一个简单的“分配”操作,如

var chatArr=<?PHP echo json_encode($data) ?>;

<script type="language/JavaScript">部分,您可以在处理完文档中的所有PHP内容后插入。你应该确保没有任何“不需要的”进入$ data。之后,您可以在文档中任何其他位置的$(function(){...})部分中对JavaScript Array / Object执行任何操作。

当然还有专用的JSON解析器,它们也会处理Date对象。简单分配只会在JavaScript对象中生成Stings或数字内容,请参阅here