如何在jQuery AJAX success回调中用$(this)获取对应表单下的目标选择器

问题核心原因 #

$.ajax的success回调函数默认上下文指向本次请求的配置对象，并非触发提交的表单元素，因此直接在回调内用$(this)无法获取到对应表单。

解决方法1：提前缓存表单对象（兼容性最好，最常用） #

在submit事件触发后、发起ajax请求前，先把当前表单的引用存为变量，回调内直接调用该变量操作元素，完整修改代码如下：

$('.formdataaj').each(function(){
    $(this).on('submit',function(e){
        e.preventDefault();
        // 缓存当前提交的表单对象
        const $curForm = $(this);
        var form_data = new FormData(this);
        $.ajax({
            type: 'post',
            url: 'php/extra_update.php',
            data: form_data,
            processData:false,
            contentType:false,
            cache: false,
            success: function(data)
            {
                var jsondata = $.parseJSON(data);
                $curForm.find(".img_ajx").text(jsondata.image);
            }
        })
    })
})

解决方法2：指定ajax回调上下文 #

通过jQuery ajax的context参数指定回调的this指向为当前表单，无需额外存变量：

$.ajax({
    type: 'post',
    url: 'php/extra_update.php',
    data: form_data,
    processData:false,
    contentType:false,
    cache: false,
    // 新增该行指定上下文
    context: this,
    success: function(data)
    {
        var jsondata = $.parseJSON(data);
        $(this).find(".img_ajx").text(jsondata.image);
    }
})

解决方法3：使用箭头函数（适配ES6+环境） #

箭头函数会继承外层作用域的this指向，不需要额外调整上下文：

$.ajax({
    type: 'post',
    url: 'php/extra_update.php',
    data: form_data,
    processData:false,
    contentType:false,
    cache: false,
    // 把回调改为箭头函数
    success: (data) => {
        var jsondata = $.parseJSON(data);
        $(this).find(".img_ajx").text(jsondata.image);
    }
})

内容的提问来源于stack exchange，提问作者Alberto P