javascript - 多形式ajax php社交评论系统

Question

我有很多用 PHP 发布的表单。它们位于我页面中的每篇文章下，但是当我使用这些 ajax 函数提交表单时，它仅发送到页面的第一个表单。为什么？我想单独发送这些表格我做错了什么？

    <script type="text/javascript" >
    $(function() {
    $(".submit").click(function() 
    {
    var name = $("#name").val();
    var comment = $("#comment").val();
    var post_id = $("#post").val(); 
    var dataString = 'name='+ name  + '&comment=' + comment+ '&post_id=' + post_id;
    if(name==''  || comment=='')
    {
    alert('Please Give Valid Details');
    }
    else
    {
    $("#flash").show();
    $("#flash").fadeIn(400).html('<img src="images/loading.gif" />Loading Comment...');
    $.ajax({
    type: "POST",
    url: "commenti.php",
    data: dataString,
    cache: false,
    success: function(html){
    $("ol#update").append(html);
    $("ol#update li:last").fadeIn("slow");
    $("#flash").hide();
    }
    });
    }return false;
    });
    });   
<script>

 <ol id="update" class="timeline">
</ol>
    <div id="flash"></div>
    <div >
    <form action="#" method="post">
    <input type="hidden" id="post" value="<?php echo $post_id; ?>"/>
    <input type="hidden" id="name" value="<?php echo $username; ?>"/> 
    <textarea id="comment"></textarea><br />
    <input type="submit" class="submit" value=" Submit Comment " />
    </form>
    </div>

 <ol id="update" class="timeline">
</ol>
    <div id="flash"></div>
    <div >
    <form action="#" method="post">
    <input type="hidden" id="post" value="<?php echo $post_id; ?>"/>
    <input type="hidden" id="name" value="<?php echo $username; ?>"/> 
    <textarea id="comment"></textarea><br />
    <input type="submit" class="submit" value=" Submit Comment " />
    </form>
    </div>

 <ol id="update" class="timeline">
</ol>
    <div id="flash"></div>
    <div >
    <form action="#" method="post">
    <input type="hidden" id="post" value="<?php echo $post_id; ?>"/>
    <input type="hidden" id="name" value="<?php echo $username; ?>"/> 
    <textarea id="comment"></textarea><br />
    <input type="submit" class="submit" value=" Submit Comment " />
    </form>
    </div>

Answer 1

首先，正如评论中所说，不要使用重复 ID。如果您不打算使用 Id 作为唯一标识符，请使用类。

<ol class="timeline update">
    <div id="flash"></div>
    <div >
        <form action="#" id="form" method="post">
            <input type="hidden" class="post" value="<?php echo $post_id; ?>"/>
            <input type="hidden" class="name" value="<?php echo $username; ?>"/> 
            <textarea class="comment"></textarea><br />
            <input type="submit" class="submit" value=" Submit Comment " />
        </form>
    </div>
</ol>

在您的 javascript 代码中，您尝试使用 var name = $('#name') 获取 id 名称，对吧？什么名字？

此外，尝试使用数组而不是字符串发送您的请求。

类似这样的事情:

$(".submit").click(function() 
{
    var name = $(this).parents('form:input.name').val();
    var comment = $(this).parents('form:input.comment').val();
    var post_id = $(this).parents('form:input.post').val();
    var data = {'name': name,
                'comment': comment,
                'post_id':post_id},
    $.ajax({
        type: "POST",
        url: "commenti.php",
        data: data,
        success: function(html){
            //do stuff
        }             
}

使用 $_POST['varName'] 访问 PHP 中的变量；

希望有帮助。