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

Question

我有一个获取数据的列表,并且每个数据下面都有一个表单,如注释框表单,其他用户可以在其中留言给特定数据.

我到目前为止所尝试的是将提交按钮放入一个数组中以区分它们(不知道我是否正确这样做,因为这是我第一次尝试使用Javascript/jQuery库和AJAX).

我只需使用PHP/MySQL就可以提交数据并将其插入到SQL数据库中,但我想至少实现这个社区的评论系统Stackoverflow,其中一旦发布评论,它就会在点击之后立即出现按钮(不是通过重新加载整个页面以便将数据提交到数据库中).

这是动态发布的数据:

<?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 */ ?>

点击提交后:

$(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;
        });
    }
});

我尝试使用数组来区分数据,但是当我尝试调整脚本时它不起作用.新发布的消息/评论应该在该<div ="flash"></div>区域中弹出(通过使用AJAX).任何人都可以帮助我如何实现我想要的输出？

Answer 1

看看这个小提琴。 http://jsfiddle.net/7xjqzmqz/

更新了小提琴 注意我正在使用 Jquery

它没有专门使用您的代码，但希望它能传达要点。

将 url 字段替换为您计划发布到的位置。

//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>');
        }

    })

});