Hello guys, welcome to the 25th session of the as we don't have a VBA to in a previous lesson we successfully created the basic auth attribute using which we can provide the basic authorization for the our VP, we can use that attribute at the controller level as well as the accent level. In this lesson we are going to use the jQuery Ajax request for basic authorization policies let's switch to visitor to add a new page. So data in this page, we are going to design a form which contain the toolboxes in which the user can insert the username and a password and click on the button which will retrieve the list of the employee as per the logged in user for this mini tour idea and User Name colon input type equals to text and br for a newline by swore input type equal to the password.
Again we are using Gambia for the break and button with the ID btn. So login and so data and one deal with that content the word result with the ID reserved We also need to assign the ID to the both of the input. Let's use the password for the password and the username for the text. From the script folder, we need to include the jQuery reference. Create a script tag to type JavaScript. Within that one the document is ready.
We need to call that anonymous function when the our button that is has btn so click Ready to perform below function we need to go to the user name. For that we're going to write the dollar. Select a name that is user name, username. Oh, well and same for the password for password to use the class war now we need to send the AJAX refresh. For that we need to write dollar Ajax and pass the request data URL all on. Let's copy from the postman and paste within the single core right there.
At DDP colon, forward slash forward slash is at the end specify the type of request that is gate and the data type of response that is JSON and headers that will contain the our authorizes in detail or Thor ization. We are going to use the basic authorization therefore we need to write the basic space and append do a username and a password in the form of the base 64. Therefore, we need to use B to A function and do write the user name hi append the colon sign with the password and create the error handler in which we as simply an idea or message indeed there is a dot html and encounter all right alright to create a success method success function within the function we got the data. In this example I'm going to display the ID name and the HR department follows each employee.
Therefore, we need to use The aware formated data equal to empty string and for each of data we will pass we will get the index and the value and for which we need to conquer the our formatted data. Value dot height hiedi pipe sign value dot name. Again pipe sign and value dot department right do a semicolon at the end side To the result and we also need to create the complete handle in which we are receiving the objects or object from which we need to check what our status is 200 cash transfer okay? Even though our assets our status is not okay that is a 200 then we need to show the Sgt score as well as the citizen description to the war. What What is her do x x HR dot two status plus x HR dot status text. That's it.
Let's run the solution. Let's click on the login and soil data. We are receiving the error encountered because of we are not enter the username and password. This was the wrong message. You should have this we need to receive the 401 unauthorized user message. For that we need to see the console tab, open the Inspect Element click on the console That is an error that x actually is not defined on the line number 32 lets me show is the studio here instead of using the accessory we need to write the etc.
There was a typo and reload the our page. Now we're going to click on login, we can see that we are received the 401 unauthorized error. And right the tester tester. Then we are Oops, I'm forgot to ask him those all element for that. We need to write the dollar sign open the curly braces mosy dollar curly braces, close it, dollar open. Close the curly braces, as well as we need a VR for the brain.
And reload the page. Right The teacher has a password and click on login. Here we can see that it written the foreign five employee, that is Priyanka and both of them artista. Let's write the wrong username. We are at the unauthorized era. And now the idea they will offer they will offer and we will review the L three o employed war the developer.
For sending the basic authentication using the jQuery, we need to use the AJAX request in which we need to use the authorization header in which we need to write the basic space. Our username and password are separated by the colon in the form of the basics. Before that we need to use the A B to A function And thanks for watching. Have a nice day.