Hello, guys, welcome to the 19 session of the ASP. NET Web API. In this session, we will test the our API that we created in a previous session with the AJAX request. For this let's switch to the Visual Studio. Let's add before I'm going to add the new folder I am editing the new HTML page with the title so all in that page you first of all we need to add the reference to the jQuery which was present in the script folder. Drag and drop the link to the HTML page.
I am creating a button, the ID btn. So, and the text so data and one deal with the ID result. And now I'm going to write the jQuery code for sending the AJAX request. Opening the script tag. Specify the script type that is a JavaScript. When the document is ready, we need to call the anonymous function.
On which reo right do a handler for the btn. So on click renew to call type function in which we are originated sending Ajax requests by the jQuery. Within that function we need to specify the configuration for always extra question. Start with the URL. For attendee URL, click on the solution. Select the project and press the f4 which will switch to the property window from which select the URL within the single code, paste it and append the API slash controller name that is an employee semicolon the type of request that we are going to file that will be get in our case and the data type that will be written in the our case it will be a JSON and write the handler for the error wonder that anonymous function will be a call which will show the error message in do our research do and then come and create the success function to success function we solicited data.
When we are receiving the data successfully, then we need to loop through the each record and display the name of the employee as well as the HR department within the braces. For that we need to first of all create a variable that holds your formatted data. Were formatted data equal to empty string and look through each data pass to the anonymous function which take the index and value as a parameter. For each value, we need to append it to the formatted data am using backcourt dollar sign curly braces on and off value dot name space the department name within the braces for that dollar curly braces valued out the par meant and use the br tag for a newline and a semicolon after the loop we need to append. After the loop we need to set the formatted data to the our result view for that to use the s for that use the jQuery selector dot dot html and specify the formatted data Let's we'll do a solution.
Let's click on the source data. It's slowly undefined in the case of the department name, and the braces are coming the next line, let's modify it. Let's write the department name instead of the HR department and complete the bracket after that, instead of the new line, save it and reload the our page. And let's click again. You can see that it returned the proper output. If you click on the inspect element and open the Network tab, like when you click on DSR data, it will send the XR and from that you can notice that the responses tight which will populate it by the word jQuery.
First of all, many To use the jQuery Ajax function for sending the request, in which we need to specify the URL from which we need to read, we need to specify we need to we need to use the AJAX function of the jQuery in which we need to specify the URL from where we are going to review the data. And the specify the meta type that is the get post put or delete and specify the written data type. That can be either Jason XML or the apple index to within the error function we can write a code to handle the over error. Within the success we are going to manipulate the our data. Thanks for watching. Have a nice day.