Question

我有这个结构

<table> <tr><td><form>   .........<input type="submit"/> </form> </td></tr></table>

我正在使用jquery这样的

通过AJAX表单提交表单

var options = {
            target:        '.ajaxMessage',   // target element(s) to be updated with server response 
           // beforeSubmit:  showRequest,
            dataType: 'json',  // pre-submit callback 
            success:     function(data){ myResponse(data)},

            cache: false,
            delegation: true,
            type: 'POST'   }; 

            $(".r_form").ajaxForm(options);

一切正常，但成功后我想将行附加到提交表单的最近表格。

我不确定this在成功后在myresponse（）函数中使用时指向的是什么

Answer 1

一些伪代码可以让你走上正轨：

$('input:submit').click(function(e){

    var $target = $(e.target);

    var $closestTable = $target.closest('table');

    $closestTable.append('<tr><td>blah</td></tr>'); //this line could be added to the success handler
});

Answer 2

“所有回调中的this引用是在设置中传递给$ .ajax的上下文选项中的对象;如果未指定context，则这是对Ajax设置本身的引用。”

来自：http://api.jquery.com/jQuery.ajax/

似乎你可以通过context传递触发ajax调用的对象，然后使用.closest('table')到达你想要的表。

Answer 3

假设您有以下标记：

<table>
    <tr>
        <td>
            <form class="r_form" method="post" action="...">
                <input type="submit"/>
            </form>
            <div class="ajaxMessage"></div>
        </td>
        <td>
            <form class="r_form" method="post" action="...">
                <input type="submit"/>
            </form>
            <div class="ajaxMessage"></div>
        </td>
        ...
    </tr>
</table>

你可以在你的document.ready处理程序中执行此操作以AJAX化这些表单：

var options = {
    success: function(data, statusText, xhr, form) {
        var ajaxMessage = $(form).closest('td').find('.ajaxMessage');
        ajaxMessage.html(data);
    }
}; 
$('.r_form').ajaxForm(options);

正如documentation中所解释的，success回调的第四个参数将代表相应的表单DOM元素，它可用于查找包含<td>（或<tr>根据ajaxMessage元素的位置而定，并从那里找到要更新的.ajaxMessage div。

如何使用ajaxform通过jquery提交表单后获得最近的表

3 个答案: