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

无论是否将上下文设置为e.target，

$(this).find(".file-success");都找不到它。

$(".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/

jquery在ajax提交后选择div里面的形式

2 个答案: