Button for AJAX Get Request

Question

Button for AJAX Get Request

I need assistance in connecting an AJAX script with a button to send a GET Request when clicked. Can someone help me figure out how to achieve this?

<script>
var url = "http://myurl.com";
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onreadystatechange = function () {
   if (xhr.readyState === 4) {
      console.log(xhr.status);
      console.log(xhr.responseText);
   }};

xhr.send();
</script>

<head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<button>Click Here</button>

javascript ajax button get xmlhttprequest

Answer 1

Answer №1

Make sure to encapsulate the code within a function that you can call with a button click:

<script>
    function makeRequest()
    {
        var url = "http://myurl.com";
        
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        
        xhr.onreadystatechange = function () {
           if (xhr.readyState === 4) {
              console.log(xhr.status);
              console.log(xhr.responseText);
           }};
        
        xhr.send();     
    }
</script>

<head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<button onclick="makeRequest();">Send Request</button>

Answer 2

Make sure to encapsulate the code within a function that you can call with a button click:

<script>
    function makeRequest()
    {
        var url = "http://myurl.com";
        
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        
        xhr.onreadystatechange = function () {
           if (xhr.readyState === 4) {
              console.log(xhr.status);
              console.log(xhr.responseText);
           }};
        
        xhr.send();     
    }
</script>

<head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<button onclick="makeRequest();">Send Request</button>

Answer 3

Answer №2

If you have already imported jQuery into your project, there is a convenient helper function available for making AJAX requests. You can utilize it in the following way:

<head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<button>Click to Request Data</button>
<!-- JavaScript -->
<script>
$('button').click(function(){
    $.get("http://myurl.com", function(result) {
        console.log(result);
    });
});
</script>

Answer 4

If you have already imported jQuery into your project, there is a convenient helper function available for making AJAX requests. You can utilize it in the following way:

<head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<button>Click to Request Data</button>
<!-- JavaScript -->
<script>
$('button').click(function(){
    $.get("http://myurl.com", function(result) {
        console.log(result);
    });
});
</script>

Button for AJAX Get Request

Answer №1

Answer №2

Similar questions

Can VueJS Computed handle multiple filters at once?

Updating a Nested Form to Modify an Object

What are the steps to integrate <br> in a JavaScript code?

When attempting to send data from Ajax to PHP as JSON, an error occurs and the data transmission fails

How can I craft a customized lightbox with dynamically generated content?

Issues encountered with the validation of dropdown lists are not functioning as

It appears that using "object[prop]" as a name attribute does not function properly in HTML

What are the steps to implement string interpolation within a template element in Vue.js?

The split function of a string displays an undefined result

What is the best way to integrate my PHP regular expression into Node.js code?

Leveraging the power of ReactJS for efficiency in executing multiple API calls concurrently

I'm experiencing issues with my code involving HTML, CSS, and jQuery

"Enhance your website forms with a Bootstrap typeahead feature for tagging using

What sets Legacy JavaScript apart from its modern counterpart, JavaScript?

What is the method for entering text into a Code Mirror line using Selenium?

`Trick Ajax into displaying 200 status code even on error responses`

AngularJS directive failing to execute

JavaScript for beginners: show a specified amount of search results and insert a loading indicator at the end

Tips for passing multiple parameters to Web API controller methods in Angular 4

What are the steps to make ng-show functional in an AngularJS application?