0

我有这个结构

<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() 函数中使用时的含义

4

3 回答 3

0

一些应该让你走上正轨的伪代码：

$('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
});
于 2012-10-09T08:30:34.963 回答
0

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

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

似乎您可以通过触发ajax调用的对象context，然后使用它.closest('table')来获取您想要的表。

于 2012-10-09T08:30:52.037 回答
0

假设您有以下标记：

<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 处理程序中执行此操作来 AJAXify 这些表单：

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

如文档中所述，回调的第四个参数success将表示相应的表单 DOM 元素，它可用于查找包含<td>（或<tr>取决于 ajaxMessage 元素所在的位置）并从那里找到.ajaxMessage要更新的 div。

于 2012-10-09T08:33:53.580 回答