如何构建Ajax注释系统？

I want to mess with jQuery and Ajax for a little while.

我想在一段时间内搞乱jQuery和Ajax。

For my first I want to create just a single input box, type in my comment and then the comment will appear below. No page refreshes. How can I do this?

对于我的第一个,我想创建一个输入框,输入我的评论然后评论将出现在下面。没有页面刷新。我怎样才能做到这一点?

3 个解决方案

#1

The basic idea is that you would have a client side page with a textarea or input. Attach a .click to a submit button and the .click will make a call to a server side script via .ajax.

基本的想法是,您将拥有一个带有textarea或输入的客户端页面。将.click附加到提交按钮,然后.click将通过.ajax调用服务器端脚本。

Client Side:

<script type="text/javascript">
    $(document).ready(
    $('#submit').click({
       $.ajax({
                 type=POST,
                 data: "comment="+$("#comments").val(),
                 dataType: json,
                 url: 'somePage.php',
                 success: function(data) {
                     if(data.error){
                         alert("server reported error"); 
                     }else{

                         $('#postedComments').append(data);
                     }
                 }
               });


    });


});
</script>
<div id="postedComments></div>
<textarea id="comments"></textarea>
<input type="submit" id="submit" value="Post Comment" />

Server Side:

<?php
   if(isset($_POST['comments'])){
        //perform Database insert of value $_POST['comments']
        if(<database error>){
            echo json_encode(array('error'=>'-1'));
        }else{
            echo json_encode(array('success'=>'1'));
        }
   }
?>

Basically when client clicks submit, the .ajax posts "comments" to the server side script. The script then procseses request and reports back in json encoding error or success which is how in the success of ajax call you can determine what happened with the server call. Success in the ajax is not success it merely indicates the server responded back, which is why you can encode some message to send back to client script to determine if the server responded with error or success message.

基本上,当客户端点击提交时,.ajax会向服务器端脚本发布“注释”。然后脚本会以json编码错误或成功的方式处理请求和报告,这是在ajax调用成功的过程中,您可以确定服务器调用发生了什么。 ajax的成功并不成功,它只是表明服务器响应,这就是为什么你可以编码一些消息发送回客户端脚本以确定服务器是否响应错误或成功消息。

#2

You should post the input box content to the server and append it to the comments upon getting success message from the server.

您应该将输入框内容发布到服务器,并在从服务器获取成功消息时将其附加到注释中。

#3

I have built a jQuery powered ajax comment system similar to that of wordpress. The create/delete actions are all ajax powered.

我已经构建了一个类似于wordpress的jQuery驱动的ajax评论系统。创建/删除操作都是ajax驱动的。

I done it by manually doing $.post() operations for creating comments and $.get() for deleting comments.

我通过手动执行$ .post()操作来创建注释和$ .get()来删除注释。

#1