Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Working with a Backend dev as a Frontend dev

I am working with a Backend developer on a website, and am wondering what to use instead of JSON/AJAX when a page only requires 1 section to be updated. For example just a username and link to a picture.

Surely, receiving the singular username in JSON is the wrong method for this? Is there an alternative? (maybe plain text??)

Thank you!

2 Answers

Josh Alling
Josh Alling
17,172 Points

In an ajax call you can use 'html' as the dataType instead of 'json' and it will come over as plain text.

Great! Thank you Josh.

So, I'd have to create a separate AJAX request for each piece of plain text?

As it wouldn't be possible to do something like: $.each(response, function (index, value) {...} Over plain text. Right?

Thanks again!

Josh Alling
Josh Alling
17,172 Points

Yes, you would have to use separate ajax calls, unless you can get all of the data from the same endpoint.

Thanks so much for all of your help. I think I've got it:

$.ajax({
    url: '',
    dataType: 'text',
    type: 'GET',
    success: function (response) {
        $('#application-info #display-picture').css({
            "background": 'url("' + response + '")',
            "background-size": "contain"
        });
    },
    error: function (jqXHR, status, errorThrown) {
        alert();
    }
});

$.ajax({
    url: '',
    dataType: 'text',
    type: 'GET',
    success: function (response) {
        $('#application-info #title').html(response);
    },
    error: function (jqXHR, status, errorThrown) {
        alert();
    }
});

$.ajax({
    url: '',
    dataType: 'text',
    type: 'GET',
    success: function (response) {
        $('#application-info #sub-title').append('<p>' + response + '<p>');
    },
    error: function (jqXHR, status, errorThrown) {
        alert();
    }
});

$.ajax({
    url: '',
    dataType: 'text',
    type: 'GET',
    success: function (response) {
        $('#application-info #application-info-text .header:eq(0)').append('<p>' + response + '<p>');

    },
    error: function (jqXHR, status, errorThrown) {
        alert();
    }
});

$.ajax({
    url: '',
    dataType: 'text',
    type: 'GET',
    success: function (response) {
        $('#application-info #application-info-text .header:eq(1)').append('<p>' + response + '<p>');

    },
    error: function (jqXHR, status, errorThrown) {
        alert();
    }
});

$.ajax({
    url: '',
    dataType: 'text',
    type: 'GET',
    success: function (response) {
        $('#application-info #application-info-text .header:eq(2)').append('<p>' + response + '<p>');

    },
    error: function (jqXHR, status, errorThrown) {
        alert();
    }
});

$.ajax({
    url: '',
    dataType: 'text',
    type: 'GET',
    success: function (response) {
        $('#application-info #application-info-text .header:eq(3)').append('<p>' + response + '<p>');

    },
    error: function (jqXHR, status, errorThrown) {
        alert();
    }
});

$.ajax({
    url: '',
    dataType: 'text',
    type: 'GET',
    success: function (response) {
        $('#application-info #application-extra-info').append('<p>' + response + ' per anum<p>');
    },
    error: function (jqXHR, status, errorThrown) {
        alert();
    }
});

$.ajax({
    url: '',
    dataType: 'text',
    type: 'GET',
    success: function (response) {
        $('#application-info #application-extra-info').append('<p>' + response + '<p>');
    },
    error: function (jqXHR, status, errorThrown) {
        alert();
    }
});

But I'm a bit stuck. How will they know what data to give me for each AJAX call?

Josh Alling
Josh Alling
17,172 Points

That depends on how your backend is set up. You might be able to add a parameter to the url like '?action=username' to request a username. You could also pass an object that tells what you want as your data in ajax, or if there is a different endpoint for each piece of data then the url itself will let them know. Either way, you will probably just have to sit down with your backend devs and find out how it is set up, or read some documentation.