评论系统实现-优快云博客

本文介绍了一个简单的评论系统的实现方法，包括使用Ajax跨域获取评论数据并动态展示，通过表单提交新评论，以及一些实用技巧如回车键换行处理等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.ajax跨域异步获取，评论接口数据

$.ajax({
        type: 'get',
        url: "",
        dataType: "jsonp",
        success: success_result,
        error: error_result,
        jsonpCallback: 'xxx'
    });
    function success_result(data) {
        var list = data
        for (var a = 0, b = list.length; a < b; a++) {
            $('#critical').append('<table>' +
                    '<tr><td rowspan = "2" valign="top"><img style="width: 80px;height: 80px;" src=' + list[a].avatar + '></td>' +
                    '<td style="border-bottom: 1px solid black ;width: 100% ;">' + list[a].name + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + list[a].time + '</td></tr>' +
                    '<tr><td  valign="top">' + list[a].comment + '</td></tr></table>'
            );
        }         //动态创建评论内容table，并且遍历出来
       // alert("success")
    }
    function error_result(error) {
        alert(error)
    }

2.form表单提交评论

<body>部分代码

<form id="form1" action="" method="POST"
          target="hidden_frame">  //post表单到发表评论接口
        <textarea name="comment" cols="8" style="width:960px;height: 60px;font-size: 20px;"></textarea>
        <button style="display: block;float:right;right:40px" id="push">发表评论</button>
    </form>
    <iframe name="hidden_frame" id="hidden_frame" style="display:none" src="115.29.242.209/blank.html"></iframe> //在当前页面的iframe中打开表单处理页面，并且隐藏起来

$('#push').click(function () {
        $('#form1').append('<input type="text" name="source" style="display: none">' +
                '<input type="text" name="time" style="display: none">' +
                '<input type="text" name="ip" style="display: none">'
        );//动态创建表单项，并且隐藏起来
//        var date = new Date();
//        var send_date = parseInt('' + date.getFullYear() + date.getMonth() + date.getDay() + date.getHours() + date.getMinutes() + date.getMilliseconds());
        $('input[name="source"]')[0].value = 13760278064;
        $("input[name='time']")[0].value = 2014011120300001;///send_data;
        $("input[name='ip']")[0].value = '119.120.23.1'; //ILData[0];
        $('textarea[name="comment"]')[0].value = $('textarea[name="comment"]')[0].value.replace(/\r?\n/g, "<br />")  //给表单项赋值
        window.location.reload();
    });

3.知识点总结

（1）替换评论输入框中的回车，为换行符。（如果不进行替换，数据上传成功至服务器数据库，就拉取不下来了）

$('textarea[name="comment"]')[0].value = $('textarea[name="comment"]')[0].value.replace(/\r?\n/g, "<br />")

（2）阿里云服务器端遇到的问题，及解决办法

1.httpd: Syntax error on line 55 of /usr/local/apache/conf/httpd.conf: module authz_host_module is built-in and can't be loaded

解：1.注释掉vi /usr/local/apache/conf/httpd.conf里面的55行#LoadModule authz_host_module /etc/httpd/modules/mod_authz_host.so

2.重启#httpd: service httpd restart

重启#apache：/usr/local/apache/bin/apachectl restart

2.File does not exist: /var/www/html/index.html

解：设置apache的默认根目录

#vi /etc/httpd/conf/httpd.conf

(1)把DocumentRoot "/var/www/html"

改为DocumentRoot "/usr/local/apache/htdocs"

(2)把<Directory “/var/www/html”>

改为<Directory “/usr/local/apache/htdocs”>

#service httpd restart

#/usr/local/apache/bin/apachectl restart

参考：http://www.800l.com/apache-htdocs-moved.html

（3）获取当前时间

获取时间戳: var time = (new Date()).getTime();
获取年月日时分秒毫秒：
var d = new Date();
var time = d.getFullYear() + "-" +d.getMonth() + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() + d.getMilliseconds();

（4）获取本地主机ip

//在head中引入
<script type="text/javascript" src="http://counter.sina.com.cn/ip/"></script>
//调用
$("input[name='ip']")[0].value = ILData[0];

发表评论页面--总结