评论系统 - 创建帖子并在页面上显示-1

Question

There are plenty for scripts on web for comment system. But I felt it very confusing. When we want to customize it, it's like as hole.

I want to create my own simple comment box where user can post and comment.

Here is my space to enter post: 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>

Now on button click I can store in the database but how to show in downward each when user enters post and click button? using ajax is jquery which ever efficient and easy I want to show user image near post. Url is coming from table below.

My table from where data is coming is:

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;

Guys i will put this entire system on github which help other also to learn. Needs help!

UPDATE 1: ajax.php - for database

<?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>';
}
?>

Answer 1

If you are using jquery then use this code

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>

In 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>';
}
?>

That's it.. it should work