ReSTful API: Returning a value to an AJAX Request

Question

Summary

Alright, so I'm kind of missing a piece of the puzzle here, so bear with me.

First, I have a slim API setup for handling the cart of an online store. Please refer to Snippet A down below to understand how this works.

Next, I have an AJAX request being made to this API in order to return this request. Please refer to Snippet B down below to understand how this works.

The problem is that I'm having trouble formulating a simple step by step process for this data to transmit through. This was ok at first, because all I did was add and remove items from the cart, but now I want to be able to update the entire cart with AJAX.

Desired Formula

1. Request Data Using AJAX from Script
2. Process Data on Server
3. Return Data to Script

The problem is returning that data, but the actual issue is unknown.

Troubleshooting

Async Requests

At first, I tried returning data to my data from my API to AJAX script just to confirm that it worked. I used async requests, which I was warned were deprecated, and they didn't really work. Should this of worked?

Timing It Maybe?

This is a ridiculous plan, but one I had nonetheless. It's where I would send an update via API, and wait a bit, then request cart contents via AJAX.

Success or Error?

This one was annoying. So I read somewhere that I should use the success: function() { //Do stuff here } to replace async requests. However, it seemed like my API would randomly return "success" and "error" - making it impossible to use reliably. I could request a cart refresh in "success" and "error" - but that seems like a bad idea. I thought it would be better to ask this community and learn how it's suppose to work.

Question

What's the 'jQuery' way of sending an AJAX request, receiving a response, and acting on that response?

Snippet A

PHP

# This is my Slim Route, it responds when a post is made to domain/cart/api
$app->post('/cart/api', function($request) {
  # Variables
  global $products; // All Shop Products in an Array
  $type = $request->getParsedBody()['type']; // Gets Type
  $id = $request->getParsedBody()['id']; // Gets ID

  # This 'if' statement determines what kind of request is being made.
  if ($type == 'add_item') {
     // Notice the "main" in "$products['main']" - that's just a product category
    foreach($products['main'] as $product) {
      // Checking if product exists
      if ($product['id'] == $id) {
        echo "Product found, name is: ".$product['name'];
        array_push($_SESSION['cart'], $product);
      }
    }
  } else if ($type == 'remove_item') { // Removes item from cart (in session)
    unset($_SESSION['cart'][$id]);
  }
  # I just put return here because it felt right.
  return;
});

Snippet B

JavaScript

# Adding Item to cart (item_id identifies item)
function addToCart(item_id) {
  $.ajax({
    url: "/cart/api",
    type: "POST",
    data: {type: "add_item", id: item_id},
    error: function(){
      console.log("Failure");
    },
    success: function(){
      console.log("Success");
      window.location = "/cart";
    }
 });
 return;
}

# Removing item from cart (item_id identifies item)
function removeFromCart(item_id) {
  $.ajax({
    url: "/cart/api",
    type: "POST",
    data: {type: "remove_item", id: item_id},
    error: function(){
      location.reload();
    },
    success: function(){
      console.log("Success");
      window.location = "/cart";
    }
 });
 return;
}

Answer 1

In terms of the Slim code, you must return a $response from your route callable so you can then control the HTTP status code. For an error, use a status code of 400 or higher.

i.e.

$app->post('/cart', function ($request, $response) {
    return $response;
}

Some other notes on your PHP code:

• Don't use # for comments
• Don't use global. Inject your $products or import using use ().
• If you are using $_SESSION, ensure that jQuery passes the session cookie back to the PHP.

• Always return a response to the jQuery. This should probably be JSON, so something like:

  $data = ['result' => true];
  return $response->withJson($data, 200);
  

  for a successful case.

• Removing an item with unset($_SESSION['cart'][$id]); will not work as that's not how you added the product to the cart in the first place.

  This is because array_push() will add an item to the $_SESSION['cart'] array with a sequential index (first product added has an index of 0, second one has an index of 1 etc. unset($_SESSION['cart'][$id]) will remove the item at the index of the id and there is no relationship between $id and the array index created by array_push() when the product was added to the array.