0

http://www.malsup.com/jquery/form/#html

我在一个页面上有多个表单。他们都使用同一个类“myForm”。使用上面的扩展，我可以让他们成功处理并 POST 到ajax-process.php.

<script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('.myForm').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    }); 
</script>

但是，我对响应有疑问。我需要获取用户提交的评论以显示在提交它的相应 div 中。我可以将其设置为表单中的隐藏字段，也可以设置为文件中的文本ajax-process.php。

我不知道如何将响应从ajax-process.php脚本中得到我可以使用的东西，如果我运行以下它会附加到所有表单（显然）。

我能想到的唯一方法是使用单个 DIV ID 而不是单个类重复脚本。但是，必须有一种方法来更新ajax-process.php返回的 div。

// prepare the form when the DOM is ready 
$(document).ready(function() { 
    // bind form using ajaxForm 
    $('.myForm').ajaxForm({ 
        // target identifies the element(s) to update with the server response 
        target: '.myDiv', 

        // success identifies the function to invoke when the server response 
        // has been received; here we apply a fade-in effect to the new content 
        success: function() { 
            $('.myDiv').fadeIn('slow'); 
        } 
    }); 
});

有什么建议么？

4

2 回答 2

0

试试这个代码：

// prepare the form when the DOM is ready
$(document).ready(function() {
    // bind form using ajaxForm
    $('.myDiv').each(function() {
        var self = this;
        $(this).find("form").ajaxForm({
            // target identifies the element(s) to update with the server response
            target: this,

            // success identifies the function to invoke when the server response
            // has been received; here we apply a fade-in effect to the new content
            success: function() {
                $(self).fadeIn('slow');
            }
        });
    });
});

工作样本（在按下按钮之前按“运行”）

于 2012-12-15T23:02:00.227 回答
0

文档：

成功

表单提交后调用的回调函数。如果提供了“成功”回调函数，则在从服务器返回响应后调用它。它传递了以下参数：

  1. responseText 或 responseXML 值（取决于 dataType 选项的值）。
  2. 状态文本
  3. xhr（如果使用 jQuery < 1.4，则为 jQuery 包装的表单元素）
  4. jQuery 包装的表单元素（如果使用 jQuery < 1.4，则为未定义）

这意味着您的选项可能如下所示：

$('.myForm').ajaxForm({
    // success identifies the function to invoke when the server response 
    // has been received; here we apply a fade-in effect to the new content 
    success: function(response, undefined, undefined, form) {
        //find .myDiv class in the current form
        form.find('.myDiv').html(response).fadeIn('slow');
    }
});​

​演示

于 2012-12-15T22:23:43.487 回答