Sending GET Request when Button is Clicked-CodePudding

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.

CodePudding user response：

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." );
        });
    });

CodePudding user response：

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.");
            })
        });
    });

CodePudding user response：

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

CodePudding user response：

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>