1

コメント システム用の Web 上のスクリプトはたくさんあります。しかし、私はそれが非常に紛らわしいと感じました。カスタマイズしたいときは、穴のようなものです。

ユーザーが投稿してコメントできる独自のシンプルなコメント ボックスを作成したいと考えています。

投稿を入力するスペースは次のとおりです。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 であり、効率的で簡単です。投稿の近くにユーザーの画像を表示したいと考えています。URLは下の表から来ています。

データが来ている私のテーブルは次のとおりです。

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()

            }

            })

           })

たとえば、これがFacebookなどのログインベースのWebサイトである場合、コメントしているユーザーデータを取得するにはphpを使用する必要があり、ログイン時にセッションを作成し、ログインに成功したときにユーザー名を保存できます$_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をより適切に使用します。あなたができることは、ur textareaをdivタグ内に配置することです。次に、divの位置を動的に変更できます.javascriptを使用して、送信ボタンが押されるたびにdivタグの名前を変更します.次に、次のjqueryを使用できますネットで見つけたコードは、あなたの問題に最も適しています。新しいコメントを投稿すると、古い投稿は論理的にシフトダウンし、それらの場所を交換しています。

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

説明が必要な場合は、お知らせください。

于 2013-10-25T04:45:34.097 に答える