AJAX样式打印文本 [英] AJAX print text with style

问题描述

我正在使用AJAX来创建聊天.

I'm using AJAX in order to create chat.

当我重新加载不带CSS样式的打印文本时，就会回复.

when I reload the replies the texts printed without the css style.

我如何使用包含样式的ajax打印文本?

how can I print text with ajax that will include the style?

谢谢

$(document).on('submit','#addReply',function(e) {       

    var text = $('#addReply textarea[name=text]').val();
    var chatID =  $("#addReply button").attr("data-ref");
    var lastRefreshReplies = $('#lastRefreshReplies').val();

    var data =  "chatID="+ chatID + "&text=" +text + "&lastRefreshReplies=" +lastRefreshReplies;
    var data = data + "&act=addReply";

     $.ajax({
        type: "POST",
        url: "ajax/chatsAjax.php",
        data: data,
        cache: false,
        success: function(res){
            if (res != "0")
            {
                $( "#replyRow" ).after(res);

            }

       }
     });

    e.preventDefault();
    return false;   

});

chatsAJAX.php文件

chatsAJAX.php file

$msgs = add_chat_reply ($_POST, $msgs);
if (empty($msgs['error']))
{
    // print previous reply + the newest reply
    refresh_replies ($_POST['chatID'], $_POST['lastRefreshReplies']);
}

FUNC-刷新回复

function refresh_replies ($chatID, $lastRefreshReplies)
{

    $sql = "SELECT * 
            FROM `chats_replies` 
            WHERE (chatID = ".$_POST['chatID'].") AND
                    (createDate > '".$_POST['lastRefreshReplies']."')

    $mainQuery = mysql_query($sql);     
    while($mainIndex = mysql_fetch_array($mainQuery))
    {
        $userName = convert_id_2_value ("users", "name", $mainIndex['userID']);

        $sysName = convert_id_2_value ("users", "name", $mainIndex['system']);  
        $createDate = date('d-m-Y H:i:s', strtotime($mainIndex['createDate']));

        ?>
        <li class="clear">
            <div class="message-data <?PHP echo $msgAlign?> ">
                <span class="message-data-name  <?PHP echo $msgFloat ?>" ><?PHP echo $userName ?> </span> &nbsp; &nbsp;
                <span class="message-data-time" ><?PHP echo $createDate ?></span> &nbsp; &nbsp;
            </div>
        </li>           
        <?PHP

    }   
}

CSS:

.chatReplies .chat-dialog {
  padding: 30px 30px 20px;
  border-bottom: 2px solid white;
}
.chatReplies .chat-dialog .message-data {
  margin-bottom: 15px;
}
.chatReplies .chat-dialog .message-data-time {
  color: #a8aab1;
  padding-left: 6px;
}
.chatReplies .chat-dialog .message {
  color: white;
  padding: 18px 20px;
  line-height: 26px;
  font-size: 16px;
  border-radius: 7px;
  margin-bottom: 30px;
  width: 90%;
  position: relative;
}
.chatReplies .chat-dialog .message:after {
  bottom: 100%;
  left: 7%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: #86BB71;
  border-width: 10px;
  margin-left: -10px;
}
.chatReplies .chat-dialog .my-message {
  background: #86BB71;
}
.chatReplies .chat-dialog .other-message {
  background: #94C2ED;
}

推荐答案

当您从服务器请求JSON时，它没有格式化(当然，除了JSON结构外)，因为JSON不是人类可读的格式，但是非常适合电脑.要突出显示您的JSON，您必须使用JSON修饰符.如果您现在只想看到JSON，可以使用诸如 JSONLint 之类的工具您的JSON.

When you are requesting JSON from your server, it has not format (except for the JSON structure, of course) as JSON is not a human-readable format but nice for computers. To highlight your JSON you must use a JSON beautifier. If you just want to see your JSON pretty right now you can use tools such as JSONLint that will prettify your JSON.

如果您想这样做有问题，则必须搜索"JSON Beautifier"框架(我现在不知道一个框架).或者，如果缩进足够，则可以使用基本的JavaScript:

If you want to do it problematically you must search for a "JSON Beautifier" framework (I do not know one right now). Or, if indention is enough, you can use basic JavaScript:

JSON.stringify(yourObject, null, '\t')

而后一个参数是用于意图的字符串.

whereas the latter argument is a string of characters that are used for intention.

第二个参数是一个替换"功能，可用于将某些属性列入白名单.请查找 JSON.strinigfy .

The second argument is a 'replacer' function that may be used to whitelist some properties. Please lookup the documentation of JSON.strinigfy.

这篇关于AJAX样式打印文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！