Question

我有一个可能在循环中的HTML表单：

<form name="ajaxform" id="ajaxform<?php echo $sn;?>" action="" method="POST">
<p>Comment:<br /> <input type="text" value="" style="width:400px" name="comment<?php echo $sn;?>"     />    
<input type="button"  id="simple<?php echo $sn;?>" class="submit" value="Save" />

<div id="simple-msg<?php echo $sn;?>"></div>

</form>

<?php 
// the loop is ending here
?>

现在，将这些表单发布到特定网址的ajax代码位于：

<script>
$(document).ready(function()
{

$("#simple<?php echo $sn;?>").click(function()
{
$("#ajaxform<?php echo $sn;?>").submit(function(e)
{
//$('#simple').val().submit(function()
//$("#ajaxform1").submit(function(e)
//{
//$('#simple-msg').show();
    $("#simple-msg<?php echo $sn;?>").html("<img src='ajax/profile/ajax-loader.gif'/>");
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax(
    {
        url : "ajax/results/comment.php?id=<?php echo $sn;?>",
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR) 
        {
            $("#simple-msg<?php echo $sn;?>").html(''+data+'');

        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
            $("#simple-msg<?php echo $sn;?>").html('<font color="red">Failed to save<br/>     textStatus='+textStatus+', errorThrown='+errorThrown+'</font><span class="icon icon-color icon-    close"></span>');
        }
    });
    e.preventDefault(); //STOP default action
    e.unbind();
});

$("#ajaxform<?php echo $sn;?>").submit(); //SUBMIT FORM
});


});
</script>

问题是我如何使用这个ajax脚本来处理所有表单而不必循环脚本。正如您在上面的脚本中看到的，我想删除所有的（）。如果我这样做并提交表单，只提供第一个表单进程，但如果我将脚本放在循环中，则所有进程都将处理。我认为这是一个不好的做法，好像我在页面中有一千个表单，脚本也重复了一千次。大数据到浏览器吧？

Answer 1

使用课程：

<form name="ajaxform" action="" method="POST" data-sn="<?php echo $sn;?>">
<p>Comment:<br /> <input type="text" value="" style="width:400px" name="comment<?php echo $sn;?>"     />    
<input type="button" class="simple submit" value="Save" />

<div class="simple-msg"></div>

</form>

和JS：

$(document).ready(function() {
    $(".simple").click(function() {
    var $ajaxForm = $(this).parents('form');
    var $simpleMsg = $ajaxForm.find('simple-msg');
        $ajaxForm.submit(function(e) {
            $simpleMsg.html("<img src='ajax/profile/ajax-loader.gif'/>");
            var postData = $(this).serializeArray();
            var formURL = $(this).attr("action");
            $.ajax({
                url: "ajax/results/comment.php?id=" + $ajaxForm.data('sn'),
                type: "POST",
                data: postData,
                success: function(data, textStatus, jqXHR) {
                    $simpleMsg.html('' + data + '');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $simpleMsg.html('<font color="red">Failed to save<br/>textStatus=' + textStatus + ', errorThrown=' + errorThrown + '</font><span class="icon icon-color icon-close"></span>');
                }
            });
            e.preventDefault(); //STOP default action
            e.unbind();
        });
        $ajaxForm.submit(); //SUBMIT FORM
    });

});

如何使用单个ajax进程循环表单

1 个答案: