Question

我正在使用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;
}

Answer 1

你可以这样做：

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

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

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

Answer 2

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

如果你想做有问题的话，你必须搜索＆＃34; JSON Beautifier＆＃34;框架（我现在不知道）。或者，如果缩进就足够了，您可以使用基本的JavaScript：

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

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

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

AJAX打印带有样式的文本

2 个答案: