Molti tutorial disponibili sul web per la creazione di URL brevi utilizzano lo script sul lato server, questo script funziona sul lato client. È facile e ha soli 5 righe di codice per chiamare le API di Bit.ly in modo asincrono utilizzando JSONP o “JSON con padding”. È necessario modificare il ‘nome utente’ e la ‘API Key’, che si ottengono creando un account su Bit.ly. Suo Uso rende gli URL corti e ordinati, poi attraverso l’interfaccia che offre Bit.ly si possono gestire e avere delle statistiche degli url generati.
Codice JavaScript
⤽
La funzione
Una volta che la pagina è pronta, la funzione viene invocata al momento di cliccare il pulsante con l’ID
Codice HTMLaccorcia_url()
si occupa di inviare l’indirizzo web, già filtrato, e il suo successo popola il blocco html identificato con risultato
. Nel caso non va a buon fine si indicherà un messaggio appropriato nel blocco errore
.<script type="text/javascript"> function accorcia_url(url) { var url=url; var username="nome utente"; // bit.ly nome utente var key="API Key"; $.ajax({ url:"http://api.bit.ly/v3/shorten", data:{longUrl:url, apiKey:key, login:username}, dataType:"jsonp", success:function(v) { var url_corto=v.data.url; $("#risultato").html('<a href="'+url_corto+'" target="_blank">'+url_corto+'</a>').show(); }, error: function() { $("#errore").html("Errore imprevisto").show(); } }); } $(document).ready(function() { $("#mio_url").focus(); $("#accorcia").click(function(e) { $("#errore").empty().hide(); $("#risultato").empty().hide(); var url = $("#mio_url").val(); var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig; var okTest = urlRegex.test(url); if(okTest) { accorcia_url(url); } else { $("#errore").html("URL incorretto").show(); } e.preventDefault(); }); }); </script>
accorcia
. Prima di farlo pulisce preventivamente i blocchi per i messaggi e testa il valore contenuto nel campo mio_url
: se l’url no ha il formato atteso invia una messaggio di errore altrimenti esegue la funzione.⤽
<form> <input type="text" name="mio_url" id="mio_url"/> <input type="submit" id="accorcia" value="Accorcia URL"/> <div id="risultato"></div> <div id="errore"></div> </form>
⤽
Ancora nessun commento