Consuming WebApi in Javascript – POST

We had seen how to make GET request to WebApi from JavaScript before. Let’s now move further and see how to make a POST request. Continuing from the previous post, let’s make our code a little clean and sophisticated.
We will create two functions, one for GET and one for POST, on the button click event, we will then have the privilege on us of what method to call and when.
Our code of HelloApi project will now like:

   1: function StartButtonClick(){

   2:         GetRequest();

   3:     }

4:

   5: function GetRequest() {

   6:     $.ajax({

   7:         url: 'http://localhost:42055/api/values',

   8:         type: 'GET',

   9:         contentType: "application/json",

  10:         success: function (data) {

  11:             for (var i = 0; i <= data.length - 1; i++) {

  12:                 var content = document.getElementById('contentApi');

  13:                 var para = document.createElement("p");

  14:                 var node = document.createTextNode(data[i]);

  15:                 para.appendChild(node);

  16:                 content.appendChild(para);

  17:             }

  18:         }

  19:     });

  20: }

21:

  22: function PostRequest() {

23:

  24: }

Okay now since our code is better, let’s now go ahead and write some code for POST request. But before doing that, let’s modify the POST action of our WebApi a bit. Here is the POST action’s code.

   1: // POST api/values

   2: public string Post([FromBody]string value)

   3: {

   4:    return value + " Jolie";

   5: }

So, no matter whatever string we pass to the action, it will append “ Jolie” to the string and return the same back. Further notice that [FromBody] attribute with the action parameter. This specifies that the action should pick up the value from the body of the HTTP request. And in order to pick up values from the request body, we have to pass one from it. The JavaScript request will do just that.

   1: function PostRequest() {

   2:        $.ajax({

   3:            url: 'http://localhost:42055/api/values',

   4:            type: 'POST',

   5:            data: JSON.stringify("Angelina"),

   6:            contentType: "application/json",

   7:            success: function (data) {

   8:                var content = document.getElementById('contentApi');

   9:                var para = document.createElement("p");

  10:                var node = document.createTextNode(data);

  11:                para.appendChild(node);

  12:                content.appendChild(para);

  13:            }

  14:        });

  15:    }

We pass “Angelina” to the request body in the form on JSON. The action will append “Jolie” to it and return “Angelina Jolie” to us. Using the previous process again, we display the data on the UI.