带样式的 AJAX 打印文本答案

【问题标题】：AJAX print text with style带样式的 AJAX 打印文本
【发布时间】：2016-10-28 13:47:00
【问题描述】：

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

当我重新加载回复时，打印的文本没有 css 样式。

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

谢谢

$(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 文件

$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;
}

【问题讨论】：

请更具体。这真的是一个 PHP 问题还是发生在客户端？你是什么意思“[...] 打印没有 css 样式”？您缺少代码突出显示吗？
@FabianDamken - 我的意思是 AJAX 打印它从 PHP 文件中获得的文本，但它不会以任何设计/样式打印它...
请看我的回答。
如果任何答案对您有所帮助，请接受它以指出正确的解决方案。

标签： php ajax

【解决方案1】：

例如，您可以这样做：

    $.ajax({
        url: "ajax/items.php",
        type: "POST",
        data: data,
        success: function(response){
            $(".result").html(response);
        }
    });

但如果需要根据您的需要进行更多调整，您必须提供更多详细信息。

在本例中，您的结果将被写入类result。您可以将 css 添加到此类中，它会在加载 ajax 数据后立即应用。

【讨论】：

显示你的一些代码，因为我现在没有什么可参考的。当您使用我向您展示的示例并且您已将适当的 css 添加到类结果时，它应该显示样式。
好吧，我认为为什么没有将样式添加到您的数据中是因为您写入了不存在的类数据。尝试在您的 html 中添加一个空的
并再次测试。
确定 - 我已添加到我的第一条消息中
好吧，你必须调整你的css才能达到你的结果类
调整？你的意思是？如果在 ajax 页面中调用 css 文件然后我尝试了它并没有工作...：/

【解决方案2】：

当您从服务器请求 JSON 时，它没有格式（当然 JSON 结构除外），因为 JSON 不是人类可读的格式，但对计算机来说很好。要突出显示您的 JSON，您必须使用 JSON 美化器。如果您现在只想看到漂亮的 JSON，您可以使用诸如 JSONLint 之类的工具来美化您的 JSON。

如果你想这样做有问题，你必须搜索一个“JSON Beautifier”框架（我现在不知道）。或者，如果缩进足够，你可以使用基本的 JavaScript：

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

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

第二个参数是一个“替换”函数，可用于将某些属性列入白名单。请查阅JSON.strinigfy的文档。

【讨论】：