JQuery Chiamata Ajax da attivare onClick

Sono nuovo di JavaScript, Jquery e Ajax. Questo è quello che sto cercando di fare:JQuery Chiamata Ajax da attivare onClick

Ho un pulsante nel mio codice HTML, e voglio attivare una chiamata AJAX che farà una richiesta GET a un server web in esecuzione sul mio computer locale.

Questo è quello che ho finora:

codice

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>

codice HTML:

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

Qualcuno può aiutarmi? Grazie in anticipo!

fonte

2015-06-20 ar88

cosa sta andando male? L'URL sembra sospetto - potrebbe voler inserire un 'http: //' o 'https: //' su di esso. – Cymen

Ok, correggimi se sbaglio, dovrei almeno vedere l'avviso ('hiii'); quando clicco sul pulsante, giusto? Non sono nemmeno arrivato a quel passo. – ar88

Hai qualche problema con il tuo codice. Per uno, il tuo selettore non punta a nessuna classe o ID. È necessario utilizzare .call o #call rispettivamente per una classe o un ID. In secondo luogo, lo script non ha la funzione document.ready. Controlla il codice qui sotto.

<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>

fonte

2015-06-20 05:22:14 NightOwlPrgmr

Come @NightOwlPrgmr ha menzionato il proprio selettore errato. Per correggere ciò è necessario utilizzare #call e non .call in quanto si tratta di un ID e non di un attributo di classe. Inoltre, la funzione Document.ready garantisce che il codice venga eseguito dopo che tutti gli elementi HTML sono stati caricati. Ciò mitigherà il rischio di provare a utilizzare un elemento che non è stato ancora creato. Un codice di esempio simile a quello di cui sopra è: -

<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>

fonte

2017-09-20 12:25:56

JQuery Chiamata Ajax da attivare onClick

risposta

Problemi correlati