Return The Response From An Asynchronous Call Ajax jQuery.

Sometimes we need to send a request to the server via an asynchronous call, the advantage of this is that we are not doing a full-page refresh and wasting bandwidth for something that could be as simple as returning a thank you message.

There are many ways of doing this such as using XHR(XMLHttpRequest), but for this example, I will be using jQuery and Ajax, which will send a request to an MVC controller and return the results.


To set up this example, we will create a javascript file that contains the code for sending and returning the response from an asynchronous call.

The code for the javascript file is below:

AjaxFindDetails is the ID of our div which will display the results of the async call to the MVC controller; if any results are found, then they are shown here. If no results a found, then a message informing the user no results are found will display.

The code for the controller is below:

The view contains a simple form with a textbox, once you enter either 'dog', 'cat' or 'fish' it will do an asynchronous call using jQuery and Ajax to the controller and do a search for the keyword. If a match is found, the results are displayed in the div; else a message is shown that no results are found.

The rest of the code for this example is below.

Test data


The test data is a simple list that returns a list of dogs, cats and fish.

Summary

I hope you found this example helpful, if yes please leave a comment below.

Leave a comment

*
*