使用Ajax在输入时提交Textarea，然后在不刷新整个页面的情况下呈现部分

Question

目前我正试图通过JS和Ajax在没有提交按钮的情况下发表评论文章，这很有效。

问题是在提交帖子时，页面会重新加载到/post/:id/comment页面，我希望它呈现部分内容，而不是刷新整个页面或转到其他页面。我不熟悉JS，如有任何帮助，不胜感激！

这就是我正在使用的：

JS，用于输入进行过帐

<script type="text/javascript" language="javascript">   
$(function(){
    $('textarea').keypress(function(e) {
        if (e.keyCode == 13 && !e.shiftKey) {
            e.preventDefault();
           var frm = this.form.submit(); 
            $.ajax({
                url: frm.attr('action'),
                data: frm.serialize(),
                complete: function(){
                    frm.submit(); 
                },
                dataType: json
            });
        }
    });
</script>

评论表单

<div class="CommentField">
<%= form_for ([micropost, @comment]), :remote => true do |f| %>
<%= f.text_area :content, :class => "CommentText", :placeholder => "Write a Comment..." %>
<% end %>
</div>

编辑

注释HTML

<div class='UserCommentContainer'>
<div class='UserPicture'>
<%= image_tag comment.user.avatar.url(:bit), :class =>"PP" %>
</div>
<div class='UserComment'>
<div class='UserName sm'>
<%= link_to comment.user.name, user_path(comment.user) %>
</div>
<div class='UserCommentText'>
<%= comment.content %>
</div>
<div class='UserCommentDate'>
<%= time_ago_in_words(comment.created_at) %>
</div>
</div>
</div>

Answer 1

您需要一些可以使用URL解决的问题，所以分部无法解决。您应该为该函数设置一个要调用的页面，并将其称为

Answer 2

这是一个开始。您的代码正在通知表单提交。。。在ajsax发生之前。我怀疑您没有返回json作为响应，因此可能仍然存在"json"dataType不正确的问题

$(function(){
    $('textarea').keypress(function(e) {
        if (e.keyCode == 13 && !e.shiftKey) {
            e.preventDefault();
           var frm = $(this).closest('form'); 
            $.ajax({
                url: frm.attr('action'),
                data: frm.serialize(),
                complete: function(){
                    /*frm.submit();*/ 
                    window.location='url/you/want';
                },
                dataType: 'json'
            });
        }
    });
})

Answer 3

您应该找到一些针对Rails的通用Ajax指南，我建议您使用免费的Railscast。有一个搜索表单在提交时不会重新加载整个页面的例子，您的情况非常相似。此外，我建议首先使用提交按钮来实现这一点。

Answer 4

好吧，让我们再试一次。。。

我认为你在寻找AJAX，看起来更像这样：

$('textarea').keypress(function(e) {
    if (e.keyCode == 13 && !e.shiftKey) {
        e.preventDefault();
        var myTextArea = this,
            frm = this.form;
        this.disabled = true;           
        $.ajax({
            url: frm.attr('action'),
            data: frm.serialize(),
            complete: function(){
               $('<div>', { text: myTextArea.value }).appendTo('body');
               myTextArea.value = '';
               myTextArea.disabled = false;
            },
            dataType: 'json'
        });
    }
});

您可以看到，在完整的方法中，我们只是将<textarea>的内容附加到主体。。。您可能有一个想要放入其中的容器，但这被称为"客户端渲染"，这意味着您正在客户端而不是服务器上构建DOM（或更改它）。。。希望这有助于打击

-----编辑----

我应该注意的是，你可能想做一些更类似的事情：.appendTo('#container')，在页面上的某个地方有一个<div id="container">，我相信评论需要更多的格式和其他。。。

看看这个演示是否能帮助你实现这个想法：http://jsbin.com/uruzul/edit#javascript，html，实时

-----更多编辑----

我还认为，要正确地做到这一点，你必须"利用"AJAX返回，我最初没有包括这一点是因为你的代码中似乎没有任何概念，但在看到你的评论HTML后。。。您将需要您的服务器返回一个JSON对象，该对象看起来像：

{ 
    "userImage": "pictureUrl/image.jpg", 
    "userName": "user name here", 
    "userLink": "link/to/user/page", 
    "date": "3/5/2012", 
    "comment": "the text of the comment" 
}

然后不使用complete，而是要开始使用success和error，请参阅此处的文档：http://api.jquery.com/jQuery.ajax/如下：

            error: function(jqXHR, textStatus, errorThrown) {
                alert('comment submit failed!nn' + textStatus);
            },
            success: function(data, textStatus, jqXHR){
               var cnt = $('<div>')
                .addClass('UserCommentContainer')
                .appendTo('.CommentContainer');
              $('<div>')
                .addClass('UserPicture')
                .appendTo(cnt)
                .append($('<img>', { src: data.userImage, 'class': 'pp' }));
              cnt = $('<div>')
                  .addClass('UserComment')
                  .appendTo(cnt);
              $('<div>')
                .addClass('UserName sm')
                .appendTo(cnt)
                .append($('<a>', { href: data.userLink, text: data.userName }));
              $('<div>')
                .addClass('UserCommentText')
                .appendTo(cnt)
                .text(data.comment);
              $('<div>')
                .addClass('UserCommentDate')
                .appendTo(cnt)
                .append(data.date);
               myTextArea.value = '';
            },
            complete: function(data, textStatus, jqXHR){
               myTextArea.disabled = false;
            },