Update table via ajax in Laravel view with table join

My goal is get the attribute "nombreSubdireccion" of the table "subdireccion" show when insert/update a new registry of "area" via AJAX, the only way I got it is reloading the page because of DB::table. I don´t know where declare the join, pls help me (sorry for my speak)

there are the models:

class subdireccion extends Model
{
    public $table = "subdireccion";

    protected $primaryKey = 'idSubdireccion';

    public $timestamps = false;
    public $fillable=['nombreSubdireccion'];
}

class area extends Model
{
    public $table = "area";

    protected $primaryKey = 'idArea';

    public $timestamps = false;
    public $fillable = [

        'nombreArea',
        'subdireccion_idSubdireccion',

    ];
}

The AJAX file:

$.ajax({
        type: type,
        url: my_url,
        data: formData,
        dataType: 'json',
        success: function (data) {
            console.log(data);
            var area = '<tr id="area' + data.idArea + '">';
            area += '<td>' + data.idArea + '</td><td>' + data.subdireccion_idSubdireccion + '</td><td>' + data.nombreArea + '</td>';
            area += '<td><button class="btn btn-primary btn-detail open_modal" value="' + data.idArea + '">Editar</button>';
            area += '<button class="btn btn-danger btn-delete delete-subdir" value="' + data.idArea + '">Eliminar</button></td>';
            area += '</tr>';
            if (state == "add") { 
                notify('¡ Área creada con éxito !', 'success');
                $('#area-list').append(area);
            } else {
                notify('¡ área actualizada con éxito !', 'success');
                $("#area" + area_id).replaceWith(area);
            }
            $('#form_area').trigger("reset");
            $('#myModal').modal('hide')
        },
        error: function (data) {
            notify('¡ ERROR !', 'error');
            console.log('Error:', data);
        }
    });

The web.php (controller)

Route::get('areas', function () {
    $subdirecciones = App\subdireccion::All();
    $areas = DB::table('subdireccion as s')
        ->join('area as a', 's.idSubdireccion', '=', 'a.subdireccion_idSubdireccion')  
        ->select('a.*', 's.nombreSubdireccion as subdireccion')
        ->paginate(10);
    return view('admAreas', compact('areas','subdirecciones'));
});

Route::get('areas/{area_id?}',function($area_id){
    $area = App\area::find($area_id);
    return response()->json($area);
});

Route::post('areas',function(Request $request){   
    $area = App\area::create($request->input());
    return response()->json($area);
});

Route::put('areas/{area_id?}',function(Request $request, $area_id){
    $area = App\area::find($area_id);
    $area->subdireccion_idSubdireccion = $request->subdireccion_idSubdireccion;
    $area->nombreArea = $request->nombreArea;
    $area->save();
    return response()->json($area);
});

page-view