ajax提交后jquery在表单内选择div

Question

我有一个包含许多表格的页面，每个表格行中有 1 个。我想提交表单，获取 ajax 响应，然后显示绿色复选标记或红色 x 以指示成功或失败（无需重新加载页面）。

如何仅在提交的表单中选择.file-success 或.file-error 跨度？

<form method="POST" action="#" class="fileform">
    <tr>
        <td class="vert-align"><input type="text" name="name" id="name" /></td>
        <td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button>
        <div class="feedback-icons">
            <span class="file-success"><i class="fa fa-check-circle"></i></span>
            <span class="file-error"><i class="fa fa-times-circle"></i></span>
        </div>
        </td>
    </tr>
</form>
... many more forms like this in table rows

$(this).find(".file-success"); 无论是否将上下文设置为 e.target 都找不到它。

$(".fileform").submit(function(e)
{
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");

    $.ajax(
    {
        url : formURL,
        type: "POST",
        data : postData,
        context: e.target,
        success:function(data, textStatus, jqXHR) 
        {
           $(this).find('.file-success').fadeIn(500);
        },
        error: function(jqXHR, textStatus, errorThrown) 
        {    
            $('.file-error').fadeIn(500);
        }
    });
    e.preventDefault();
});

谢谢！

Answer 1

在您的函数$(this) 中将对应于上述函数的元素。想不出更好的解释方式，所以这里举个例子

 $('element').function(){
     $(this);//this is element
     $.ajax({
     exampleFunction:function(){
         $(this);//would probably be ajax
     },
     });
 });

所以要找到你的元素，试试这些选择器/方法

$('.file-success','.fileform')
$('.file-success')

$('.fileform').submit(function(){
    var self=this;
    $ajax({
        success:function(result){
            if(result=="true")$('.file-success',self).show();
        }
    });
});

更多帮助

这有点用于向函数添加变量，在调用具有唯一变量的多个函数时会派上用场。

function build(var r){
    this.r=r;//this corresponds to build function or an element you set to build
}

Answer 2

您应该将$(this) 定义为一个变量，因为闭包规则，它曾经可以访问！

(".fileform").submit(function(e){
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    // Define $(this) as a variable that is accessible to any function defined after this.
    var self = $(this);
    $.ajax({
        url : formURL,
        type: "POST",
        data : postData,
        context: e.target,
        // You can ommit the status and jqXHR as you don't use them
        success:function(data){
           // Now use `self` and it works
           self.find('.file-success').fadeIn(500);
        },
        // And here you can ommit them to - if you want the text status, just use error.statusText
        error: function(error){    
            $('.file-error').fadeIn(500);
        }
    });
    e.preventDefault();
});

正如@JamesMontagne 提到的那样，您正在使用上下文，如果我在 jQuery 文档上正确阅读，它会更改您的 this 对象。而且由于您的事件目标是按钮，因此您的 $(this) 解决方案将不起作用！

因为这需要一个 ajax 请求，所以我不能真正伪造这个完整的请求，但请查看 jQuery 文档以查看一个很好的示例：

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" ); // adds done class to the BODY, not the form
});

这是文档：http://api.jquery.com/jquery.ajax/