Front End Web Development

Spark Boulder, Summer 2017

Session 17: A New Session

jQuery 203: HTTP requests with jQuery - Part 2

THE END IS NIGH

We're approaching the end of the class!

On August 23rd at 9pm (1 week after the class ends), report cards get generated!

Report cards include grades on all assignments, attendance, and links to projects:

Remember to check your grades with grades on @classbot!

Remember to create separate site44 apps for your projects so that potential clients and employers can see them!

The Social Network Front End Project

For your final project, I'm going to have you create the front end to the Spark Front End Web Development Social Network.

All of the students in the class are on the Social Network! You can create new posts, and everyone else in the Social Network can see those posts.

For your front end, you'll need at least 2 pages:

You'll need to make requests to the API to create and get posts on the Social Network. All of the API documentation is up at https://spark-class-social-network-api.hoff.tech/.

Some notes:

Logistics:

More Dumb Fun Web Stuff

SQUIRREL

HTTP requests with jQuery

Time to bust out those text editors!

GET requests with jQuery recap

<!-- index.html -->

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
        <script src="myscript.js"></script>
    </body>
</html>
// myscript.js

$.ajax({
    url: "https://spark-class-social-network-api.hoff.tech/api/posts",
    method: "GET"
}).done(function(data) {
    // the request has succeeded
    console.log(data);
}).fail(function(jqXHR, status, error) {
    // the request has failed
    console.log(error);
});

URL parameters

Sometimes we can select which data we want by changing various URL parameters - basically just various bits in the URL to select different objects in the system.

For example, to get all of the profiles in the system, we can make a GET request to the /profiles API route:

<!-- index.html -->

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
        <script src="myscript.js"></script>
    </body>
</html>
// myscript.js

$.ajax({
    url: "https://spark-class-social-network-api.hoff.tech/api/profiles",
    method: "GET"
}).done(function(data) {
    // the request has succeeded
    console.log(data);
}).fail(function(jqXHR, status, error) {
    // the request has failed
    console.log(error);
});

But, if we only wanted to get Ken's profile (and we didn't want to filter through all profiles in the system), we could just make a GET request to the /profiles/ken API route:

<!-- index.html -->

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
        <script src="myscript.js"></script>
    </body>
</html>
// myscript.js

$.ajax({
    url: "https://spark-class-social-network-api.hoff.tech/api/profiles/ken",
    method: "GET"
}).done(function(data) {
    // the request has succeeded
    console.log(data);
}).fail(function(jqXHR, status, error) {
    // the request has failed
    console.log(error);
});

Try changing the name on the URL (/profiles/ken) and see what comes up.

Query parameters

There's one more way that you can specify data when making a GET request - query parameters.

Normally, you can just tack query parameters onto the end of a URL by using ? and putting = between each key and value, like this:

https://spark-class-social-network-api.hoff.tech/api/posts?profile=ken

(this will get all the posts made by the user with the profile "ken")

If you want to put multiple query parameters, you'll have to separate them with an &:

https://spark-class-social-network-api.hoff.tech/api/posts?profile=ken&someotherparameter=asdfasdfasdf`

Thankfully, jQuery provides a somewhat easier way to do this with the data option.

<!-- index.html -->

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
        <script src="myscript.js"></script>
    </body>
</html>
// myscript.js

$.ajax({
    url: "https://spark-class-social-network-api.hoff.tech/api/posts",
    method: "GET",
    data: {
        profile: "ken"
    }
}).done(function(data) {
    // the request has succeeded
    console.log(data);
}).fail(function(jqXHR, status, error) {
    // the request has failed
    console.log(error);
});

POST requests with jQuery

Remember, we use POST requests any time we want to create or update data.

jQuery's $.ajax() documentation: https://api.jquery.com/jQuery.ajax/

The only difference between a GET and POST request is the method field on our $.ajax() call.

Generally, POST requests will need to include some kind of data payload, but it's possible for them not to. (POST request payloads don't work the same way that query parameters do in GET requests - in POST requests, they're not part of the URL, but they're still sent as part of the request body.)

Let's post a new quote to Ken's profile on the Social Network! Find the "Creating a new post" section on https://spark-class-social-network-api.hoff.tech/#getting-started.

<!-- index.html -->

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
        <script src="myscript.js"></script>
    </body>
</html>
// myscript.js

$.ajax({
    url: "https://spark-class-social-network-api.hoff.tech/api/posts",
    method: "POST",
    data: {
        profile_id: "ken",
        profile_secret: "ken's super secret profile_secret",
        content: "Mathematical!"
    }
}).done(function(data) {
    // the request has succeeded
    console.log(data);
}).fail(function(response) {
    // the request has failed
    console.log(response.responseText);
});

This obviously won't work for you, unless you have my profile_secret :) try changing profile_id and profile_secret and see what happens!

That's all I've got for today!

What questions are there?

How to be a Web Developer

  1. Look stuff up on the internet
  2. Make stuff
  3. Repeat

Excelsior! 🚀