1

网络上有很多用于评论系统的脚本。但我觉得这很混乱。当我们想定制它时，它就像一个洞。

我想创建自己的简单评论框，用户可以在其中发布和评论。

这是我输入帖子的空间：http: //jsfiddle.net/karimkhan/FNcs8/

<lable>Add post </lable><br>
<textarea rows="4" name="Addpost" cols="50" placeholder="Add post"> </textarea>
<input type="submit" value="share"> </input>

现在点击按钮我可以存储在数据库中，但是当用户输入帖子并点击按钮时如何向下显示？使用 ajax 是 jquery，我想在帖子附近显示用户图像。网址来自下表。

我的数据来自哪里的表是：

CREATE TABLE `user_record` (
  `id` varchar(40) NOT NULL,
  `name` varchar(50) DEFAULT NULL,
  `email` varchar(50) DEFAULT NULL,
  `picture` varchar(50) default NULL  //url for picture
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

伙计们，我会将整个系统放在 github 上，以帮助其他人学习。需要帮助！

更新 1：ajax.php - 用于数据库

<?php

$con = mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$query= "select * from user_record where id=1660546353";

$result = mysqli_query($con,$query);


//build html format as you need it..
while($row = mysqli_fetch_array($result)){

echo '<div class="comment">'.$row ['name'].'<img src="'.$row ['picture'].'"/></div>';
}
?>
4

3 回答 3

2

如果您使用的是 jquery，请使用此代码

HTML

<label>Add post </label><br>
<textarea id="message" rows="4" cols="50" placeholder="Add post"> </textarea>
<input type="submit" id="submit" value="share"> </input>
<div id="commentsholder"></div>

Javascript

<script type="text/javascript">
$(document).ready(function(){

$('#submit').on('click',function(){
 var commentdata=$("message").val();
  $.ajax({
        type: "POST",
                     data:{ 
            comment: commentdata
                },
        url: "ajax.php",
        success: function(data, textStatus){
            //alert(data);
            $("#commentsholder").append(data);
            }
        },'html');
   });
});
</script>

在 ajax.php

//insert comment into database.
//get the user content who are posting it.
<?php

$con = mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$query= "select * from user_record where id=1660546353";

$result = mysqli_query($con,$query);


//build html format as you need it..
while($row = mysqli_fetch_array($result)){

echo '<div class="comment">'.$row ['name'].'<img src="'.$row ['picture'].'"/></div>';
}
?>

就是这样..它应该工作

于 2013-10-25T04:51:41.530 回答
1

你可以使用这种方法，我希望这会对你有所帮助：-

ul当您的文本区域或小提琴中的文本输入上方没有评论时，放置一个隐藏的块（ ）。

<ul id="comments" style="display:none"></ul>

<lable>Add post </lable><br>
<textarea  id="cmntinput" rows="4" name="Addpost" cols="50" placeholder="Add post"> </textarea>
<input id="submitbtn" type="submit" value="share"> </input>

现在使用 jquery ajax 作为提交/点击事件

$('#submitbtn').click(function(e)
 {
    e.preventDefault();

    input=$('#cmntinput').val();

    var comment={};

    comment.input=input;

    $.ajax({

            url: 'path/to/php',

            data: comment,

            type: 'POST'

            success: function()

            {


                  $('#comments').append('<li id="cmnt">'+input+</li>)

                  //apply some css changes to `li#cmnt or ul#comments`

                  $('li#cmnt').css({listStleType: 'none'}) //example

                  $('#comments')fadeIn()

            }

            })

           })

您必须使用 php 来获取正在评论的用户数据，例如，如果这是一个基于登录的网站，如 facebook 等，那么您可以在登录时创建会话，并可以在成功登录时存储用户名$_SESSION。在将在 ajax 调用上运行的 php 脚本中，您可以这样编写

session_start();
user=$_SESSION['userid'];

//retrieve data on the basis of userid from table where you are storing user info like name email etc

//on the basis of retrieved data insert the `$_POST['input']`(comment) in appropriate table

如果您想在附加的新评论中显示用户名、日期等，请使用 php 为您准备整个字符串

$output="<li id='cmnt'><ul><li id='name'>".$data['name']."<li id='content'>".$_POST['input']."</li></ul></li>


     //$data[] is the array to store user information that you have retrieved about user

并回显它并将其用作对 ajax 成功的响应以附加到ul#comments

于 2013-10-25T05:35:59.570 回答
1

更好地使用jquery。你可以做的是将你的textarea放在div标签中，然后你可以动态改变div的位置。使用javascript在每次按下提交按钮时更改div标签的名称。然后你可以使用以下jquery我在网络中找到最适合您的问题的代码。当您发布新评论时，旧帖子将在逻辑上向下移动，我们正在交换他们的位置。

$('.div2:parent').each(function () {
$(this).insertBefore($(this).prev('.div1'));
});

如果你想要任何澄清，请告诉我。

于 2013-10-25T04:45:34.097 回答