Question 69820 in Ajax Question posted in
You can find the official documentation here.

Sending GET Request when Button is Clicked – Jquery ajax

I’m attempting to send a GET request as soon as a button is pressed. As I’m quite inexperienced with HTML and JQuery/Ajax, I’m a little bit confused as to how to do this. My code is as following

  <div id = "Reset">
  <!-- <form method="get"></form> -->
  <!-- <form action="https://wt.ops/reset" method="get"> -->
  <button>Reset</button>
  <!-- </form> -->
  </div>

 <script>
      $("Reset").ready(function(){
        $( "#Reset" ).click(function(){});
        $.get( "https://wt.ops/reset", function( data ) {
          $( ".result" ).html( data );
          alert( "Load was performed." );
        })});

      </script>

Currently what it’s doing is that it just loads the JQuery scripts automatically when the page is reloaded. But when I click the button, it does nothing.

Tags:

4

Answers


  1. 0

    You should attach the click handler after the document is loaded.

    $("document").ready(function(){
    //.. click handler
});

    Your $.get should be within the click handler.

        $("#Reset").click(function(){
        $.get( "https://wt.ops/reset", function( data ) {
            $( ".result" ).html( data );
            alert( "Load was performed." );
        });
    });
    Login or Signup to reply.
  2. 0

    Few things you have to update

    1. this is just to ask have you added the jquery script in head

    2. You have to change the id from div to button tag or remain as it is

    <div>
    <!-- <form method="get"></form> -->
    <!-- <form action="https://wt.ops/reset" method="get"> -->
    <button id="Reset">Reset</button>
    <!-- </form> -->
</div>

    3. You have to update the script function to below function. I have only changed the url to check the data

    $(document).ready(function () {
        $("#Reset").click(function () {
            $.get("https://jsonplaceholder.typicode.com/todos", function (data) {
                console.log(data);
                alert("Load was performed.");
            })
        });
    });
    Login or Signup to reply.
  3. 0

    I see you use Jquery.

      <div id = "reset">
  <button  >Reset</button>
  <span id='result'> data</span>
  </div>

  $().ready(function(){
      
        $( "#reset" ).click(function(){
        console.log('click')
        getFileFromNet();
        });
        
        function getFileFromNet(){
         $.get( "https://rickandmortyapi.com/api/character/2", function( data ) {
          $( "#result" ).html( data );
          alert( "Load was performed." );
          
        })
        }
        });

    https://jsfiddle.net/eaLjb1n5/

    Maybe it help you

    Login or Signup to reply.
  4. 0

    First, you add jQuery in your html file. We use ajax method for send request.

    Here is my code

    <div>
  <button id="submit">Reset</button>
</div>
<script>
$(document).ready(function(){
    $("#submit").on("click",function(event){
        $.ajax({
            url: "", //your url
            method: "GET",
            success: function(data){
                console.log(data);
            },
            error: function(){
                alert("error");
            }
        });
    });
});
</script>

    if you have form data then you can submit form like this

    <form id="form">
  <input name="name" type="text"/>
  <button type="submit">Submit</button>
</form>
<script>
$(document).ready(function(){
    $("#form").on("submit",function(event){
        event.preventDefault();
        var f = $(this).serialize();
        $.ajax({
            url: "", //your url
            method: "GET",
            data: f,
            success: function(data){
                console.log(data);
            },
            error: function(){
                alert("error");
            }
        });
    });
});
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search