JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="tester">click me to download json</a> || <span class="status"></span>

<textarea name="" id="output" cols="30" rows="10" style="width:100%;height:250px;"></textarea>

JavaScript

$(function () {

    $('#tester').on('click', function (e) {
        e.preventDefault();
        
        $('.status').text('----');

        var who = "john";
        var where = "london";
        
        console.log()

        $.ajax({
            url: 'https://phpproxy-dev.herokuapp.com/',
            data: {
                'url': 'http://personer.eniro.se/resultat/' + who + '/' + where
            },
            dataType: 'jsonp',
            jsonp: 'callback',
            beforeSend:function(){
                $('.status').text('downloading');
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(textStatus + errorThrown);
            },
            success: function (data) {
                console.log(data);
                $('#output').val(data.contents);
            },
             complete:function(){
                $('.status').text('json downloaded');
            }
        });
    });
});