Wywołanie Ajax JQuery do wywołania onClick

Jestem nowy w JavaScript, Jquery i Ajax. Oto, co próbuję zrobić:Wywołanie Ajax JQuery do wywołania onClick

Mam przycisk w moim kodzie HTML i chcę wywołać wywołanie AJAX, które spowoduje żądanie GET do serwera WWW uruchomionego na moim komputerze lokalnym.

To, co mam tak daleko:

kod

JS:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 

 

 
<script type="text/javascript"> 
 

 

 
$('call').click(function() { 
 
    alert("hiii"); 
 

 
    $.ajax({ 
 
    'url' : 'localhost:8080/blah/blah/blah', 
 
    'type' : 'GET', 
 
    beforeSend: function() { 
 
       alert(1); 
 
      }, 
 
    error: function() { 
 
       alert('Error'); 
 
      }, 
 
    'success' : function(data) { 
 
     if (data == "success") { 
 
     alert('request sent!'); 
 
     } 
 
    } 
 
    }); 
 
}); 
 

 
</script>

HTML kod:

<body> 
 
    <div> 
 
    <form> 
 
     <div class = "buttons"> 
 
      <input type="submit" id="call" value="call"> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</body>

Czy ktoś może mi pomóc? Z góry dziękuję!

Źródło

2015-06-20 ar88

Co się dzieje źle? URL wygląda podejrzanie - może chcieć umieścić na nim 'http: //' lub 'https: //'. – Cymen

Ok, popraw mnie jeśli się mylę, powinienem przynajmniej zobaczyć alert ("hiii"); kiedy kliknę przycisk, prawda? Nawet nie idę do tego kroku. – ar88

Masz kilka problemów z kodem. Po pierwsze, twój selektor nie wskazuje żadnej klasy ani identyfikatora. Musisz użyć odpowiednio .call lub #call dla klasy lub ID. Po drugie, twój skrypt nie ma funkcji document.ready. Sprawdź kod poniżej.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    // document.ready function 
    $(function() { 
     // selector has to be . for a class name and # for an ID 
     $('.call').click(function(e) { 
      e.preventDefault(); // prevent form from reloading page 
      alert("hiii"); 

      $.ajax({ 
       'url' : 'localhost:8080/blah/blah/blah', 
       'type' : 'GET', 
       beforeSend: function() { 
        alert(1); 
       }, 
       error: function() { 
        alert('Error'); 
       }, 
       'success' : function(data) { 
        if (data == "success") { 
         alert('request sent!'); 
        } 
       } 
      }); 
     }); 
    }); 
</script>

Źródło

2015-06-20 05:22:14 NightOwlPrgmr

Jako że @NightOwlPrgmr wspomniał, że selektor jest błędny. Aby to poprawić, należy użyć wartości #call, a nie .call, ponieważ jest to identyfikator, a nie atrybut klasy. Również funkcja Document.ready zapewni działanie twojego kodu po załadowaniu wszystkich elementów html. Zmniejszy to ryzyko próby użycia elementu, który nie został jeszcze stworzony. Próbkę kodu podobny do tego powyżej to: -

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"> 
    </script> 
</head> 
<body> 
    <div> 
     <form> 
      <div class = "buttons"> 
       <input type="submit" id="call" value="call"> 
      </div> 
     </form> 
    </div> 
    <script type="text/javascript"> 
     // document.ready function 
     $(document).ready(function() { 
      // selector has to be . for a class name and # for an ID 
      $('#call').click(function(e) { 
       e.preventDefault(); // prevent form from reloading page 
       alert("hiii"); 

       $.ajax({ 
        'url' : 'localhost:[port_number_web_server]/blah/blah/blah', 
        'type' : 'GET', 
        beforeSend: function() { 
         alert(1); 
        }, 
        error: function() { 
         alert('Error'); 
        }, 
        'success' : function(data) { 
         if (data == "success") { 
          alert('request sent!'); 
         } 
        } 
       }); 
      }); 
     }); 
    </script> 
</body>

Źródło

2017-09-20 12:25:56

Wywołanie Ajax JQuery do wywołania onClick

Odpowiedz

Powiązane problemy