javascript - 使用 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

看看这个 fiddle 。 http://jsfiddle.net/7xjqzmqz/

已更新 fiddle注意我正在使用 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>');
        }

    })

});