使用javascript确定数组提交按钮,然后使用Ajax输出数据

I have a list of fetched data, and to every data has a form below it, like a comment box form, where other users can leave a message to the specific data.

What I've tried so far is putting the submit button into an array to distinguish it from one to another (don't know if I'm doing this right as this is one of my first attempt in using Javascript/jQuery library and AJAX).

I can submit the data and insert it into the SQL database just by using PHP/MySQL but I wanted to achieve at least the comment-like system of this community, Stackoverflow, wherein once a comment is posted, it would show up right after hitting the button (not by reloading the whole page in order to submit the data into the database).

This is the dynamically post data:

<?php while($loopquery){ ?>
   <div>
      <?php echo $row['data']; ?>
      <div id="flash[]"></div> <!-- NEW POSTED COMMENT SHOULD BE SHOWN HERE -->
      <form action="#" method="POST">
      <input type="text" name="comment[]" id="comment[]">
      <input type="submit" id="submit[]">
      </form>
   </div>
<?php } /* END OF LOOP */ ?>

And once the submit is clicked:

$(function () {
    var submit = document.getElementById('submit');
    for (var a = 0; a < submit.length; a++) {
        submit[a].click(function () {
            var comment = document.getElementById('comment');
            var hiddentaskid = document.getElementById('hiddentaskid');
            var dataString = '&comment='+comment[a]+'&hiddentaskid='+hiddentaskid[a];
            if (comment[a] == '' || hiddentaskid[a] == '') {
                alert('Please Give Valid Details');
            } else {
                var flash = document.getElementById('flash');
                flash[a].show();
                flash[a].fadeIn(400).html('Loading message');
                $.ajax({
                    type: "POST",
                    url: "commentajax.php",
                    data: dataString,
                    cache: false,
                    success: function (html) {
                        $("ol#update").append(html);
                        $("ol#update li:last").fadeIn("slow");
                        flash[a].hide();
                    }
                });
            }
            return false;
        });
    }
});

I've tried using array to distinguish the data from one to another, but it's not working when I try to tweak the script. New posted message/comment should pop-out in the <div ="flash"></div> area (by using AJAX). Can anyone help me how I can achieve my wanted output?

doukang7858
doukang7858 好吧,如果那样你可以使用Malsup的ajaxForm,malsup.com/jquery/form更多的人应该知道这个真棒:)
大约 6 年之前 回复
drr25281
drr25281 ID必须是唯一的。在循环中使用它们时使用类而不是id。
大约 6 年之前 回复
duan010167787
duan010167787 -将数据插入数据库不是我的问题。我的问题是调用ajax。
大约 6 年之前 回复
dousong5161
dousong5161 在那里只有一个隐藏的表单字段来发布提交的表单的id会不会更好...它不应该是一个你没有在一起发布的数组EG<inputtype=“hidden”name=“inreplyto“value=”$commentId“>
大约 6 年之前 回复
duanche2007
duanche2007 您的帖子与此帖子类似,您需要在通过ajax发布数据时传递变量以获取更多详细信息,请访问此链接stackoverflow.com/questions/25557075/...
大约 6 年之前 回复
dpa55065
dpa55065 -没有错误。但是,如果我删除HTML属性和脚本中的数组,则注释将显示所有数据,而不是仅显示在当前帖子上。
大约 6 年之前 回复
dsce23640
dsce23640 毕竟问题是什么?你的代码是否有误?
大约 6 年之前 回复

1个回答

Check out this fiddle. http://jsfiddle.net/7xjqzmqz/

Updated fiddle Note I'm using Jquery

It isn't using your code specifically, but hopefully it gets the point across.

Replace the url field with where you plan to POST to.

//message is just an object to keep the comment
var message = {name: 'Gabs00'};


$('form').on('submit', function(e){
    //stop page reload
    e.preventDefault();

    //Using $(this), target this specific form
    message.comment = $(this).find('.message').val();
    var json = JSON.stringify(message);

    //Finding the parent div, to make sure I append only to this forms comment list
    var $parent = $(this).closest('.item-to-comment');

    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data:{json: json},
        success: function(resp){

            //Traversing back down the dom
            var $ul = $parent.find('.comments');

            $ul.find('li').removeClass('special');
            $ul.append('<li class="special">' + resp.name + ': ' +
                       resp.comment + '</li>');
        }

    })

});
dty47696
dty47696 您可能希望使用某些代码发布另一个。 听起来好像所有的评论都被重新加载,但旧的数据并没有首先从dom元素中清空。
大约 6 年之前 回复
duan2428
duan2428 +1我现在对这个答案的当前问题是重复的评论。 我现在正在建设的项目现在具有典型社交媒体的方面。 主页包含最新活动,因此一旦用户到达页面末尾,我就会使用ajax来获取新数据/活动。 现在的问题是,当我尝试对新的ajax获取的数据发表评论时,它会重复评论,两次或最多4次。 看起来这个答案与我的其他ajax不兼容。
大约 6 年之前 回复
duanji9264
duanji9264 我怎样才能获得POST数据? 我将url更改为我的插入查询页面,但它不起作用。 我将表单名称设置为array [],然后在我的插入查询中,我检查了包含内容的数组,一旦找到,它将被插入到我的数据库中。 但似乎没有用。
大约 6 年之前 回复
doujie4787
doujie4787 在这里尝试jjery调用ajax的文档
大约 6 年之前 回复
douwen5681
douwen5681 我已经尝试用页面本身替换URL,但它仍然显示undefined:undefined。 注意在这一部分解释更多?
大约 6 年之前 回复
douci1677
douci1677 抱歉,我没有提到它,但echo / json只适用于jsfiddle和ajax。 您需要将该网址替换为您网站的相应网址。 我不知道你页面上的其他表格。 您可以在评论表单中添加一个类,并使用类名替换$('form')中的表单。 在这里小提琴
大约 6 年之前 回复
dongyun6003
dongyun6003 很抱歉回到这个问题太晚了。 我已经在我的项目上尝试了你的答案,但它没有显示任何内容,但是如果我删除了url(/ echo / json)的内容,它将显示undefined:undefined而不是用户的名字及其消息。 我还想将消息插入我的数据库。 你回答也会禁用我页面上的其他表单,比如搜索栏。 不管怎么说,还是要谢谢你。
大约 6 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐