Categories
TUTORIALS

Add A Variable To URL Of Ajax – How To Guide

So you as a web developer want to have your user be able to add a variable to the URL of his post. But you do not know how to do that? Well do not worry. Because in this tutorial, we will teach you how to do just that!

Now this article is going to get a bit more technical. So I want you guys to be with me all the way through the article, alright? Great! Then it is about time for us to start. Let us go!

Add a variable to URL of Ajax – The Problem

So what is the problem we are looking at over here? Well, it is actually quite simple. We want to be able to add a variable value to the url parameter of the Ajax call.

Add a variable to URL of Ajax
Add a variable to URL of Ajax

So we are talking about a piece of code that looks something like this:

let var myQuery = "What Is My IP?";
$.ajax({url: "https://google.com/search?q=" + myQuery, method: 'POST', contentType: false,      cache: false, processData: false,
success: function(result){
      $("#div1").html(result);
    }});

So, as you can see from the above code, we are trying to pass in the search query “What Is My IP?” by trying to Add a variable to URL.

And in this case, we have our query stored in a Javascript variable myQuery. So by adding this variable to our Ajax url parameter, we should be able to issue a POST request to Google.

But this is all well and good, but what is the use of this? Why are we even using Ajax call for doing this in the first place? Since we could have just used simple Javascript for a URL query, right?

So to answer this question, we need to know what an Ajax call does.

So we can use simple Javascript code to make an url call. But the problem with that is, the call will be blocking. So our Javascript code will not continue to run until we get back a response from the server.

But on the other hand, using Ajax ensures us that we can make asynchronous requests for the web query. So thereby, our remaining Javascript code will continue to run while we are waiting for the ajax url code’s response.

And by using a Javascript variable like “myQuery” above, we can allow users to add a variable to url to our Jquery ajax request.

Conclusion

So there you have it. It is quite simple to add in a variable to Ajax calls. And I hope that this article helped you learning how to do it.

But if have any more queries about it, do let me know in the comments below. Because I will be more than happy to help you out!

Want to learn about Typescript? Take a look at this article

So with that, I will end this article. See you guys until next time. Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *