通過PHP和AJAX自動鏈接短路（bit.ly）

我想用一個字段（url - 鏈接縮短）構建一個表單（VIA POST METHOD）。現在的問題是如何以及如果有可能建立一個表單，檢測URL字段的值是一個鏈接，並自動縮短它，而不是等待你點擊發送（例如像Bit.ly網絡）。通過PHP和AJAX自動鏈接短路（bit.ly）

主要思想是一旦該字段是一個標識符，值是一個適當的超鏈接是直接發送和縮短（而該字段被替換爲一個縮短的鏈接）它不等待點擊發送。

的index.html

<html> 
<head> 
<script> 
function showHint(str) { 
    if (str.length == 0) { 
     document.getElementById("txtHint").innerHTML = ""; 
     return; 
    } else { 
     var xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       document.getElementById("txtHint").innerHTML = this.responseText; 
      } 
     }; 
     xmlhttp.open("GET", "gethint.php?q=" + str, true); 
     xmlhttp.send(); 
    } 
} 
</script> 
</head> 
<body> 

<p><b>Start typing a url in the input field below:</b></p> 
<form> 
Url: <input type="text" onkeyup="showHint(this.value)"> 
</form> 
<p><span id="txtHint"></span></p> 
</body> 
</html>

gethint.php

<?php 
// get the q parameter from URL 

    $q = $_REQUEST["q"]; 

     $hint = ""; 

    if (!filter_var($q, FILTER_VALIDATE_URL) === FALSE) {  

    // short the link 

    $rand = rand(1,1000); 

    $hint = 'http://domain.com/'.$rand; } 

    echo $hint === "" ? "Not a valid URL" : $hint; ?>

來源

2016-12-01 AnnaLA

我不明白，你的問題是什麼？你的代碼工作正常嗎？ – MAZux

它不工作...我想要做的就像bit.ly ...當領域是一個鏈接，並自動縮短。 @MAZux – AnnaLA

控制檯中的任何錯誤？ – MAZux

我會使用jQuery的事件觸發/ AJAX和https://gist.github.com/dperini/729294爲WEBURL正則表達式。

我不是在家裏純JavaScript AJAX調用，但

xmlhttp.open("GET")

它去，如果你想使一個POST的正確方法？

反正你錯過了，主要就是

function isUrl(url){ 
     var regex = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)[email protected])?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i; 
     if(regex.test(url)){ 
      return regex.test(url); 
     }else{ 
      return regex.test("http://"+url); 
     } 
}

所以這應該是你的新的index.html

<html> 
<head> 
<script> 
var extensions = [".aero",".biz",".cat",".com",".coop",".edu",".gov",".info",".int",".jobs",".mil",".mobi",".museum",".name",".net",".org",".travel",".ac",".ad",".ae",".af",".ag",".ai",".al",".am",".an",".ao",".aq",".ar",".as",".at",".au",".aw",".az",".ba",".bb",".bd",".be",".bf",".bg",".bh",".bi",".bj",".bm",".bn",".bo",".br",".bs",".bt",".bv",".bw",".by",".bz",".ca",".cc",".cd",".cf",".cg",".ch",".ci",".ck",".cl",".cm",".cn",".co",".cr",".cs",".cu",".cv",".cx",".cy",".cz",".de",".dj",".dk",".dm",".do",".dz",".ec",".ee",".eg",".eh",".er",".es",".et",".eu",".fi",".fj",".fk",".fm",".fo",".fr",".ga",".gb",".gd",".ge",".gf",".gg",".gh",".gi",".gl",".gm",".gn",".gp",".gq",".gr",".gs",".gt",".gu",".gw",".gy",".hk",".hm",".hn",".hr",".ht",".hu",".id",".ie",".il",".im",".in",".io",".iq",".ir",".is",".it",".je",".jm",".jo",".jp",".ke",".kg",".kh",".ki",".km",".kn",".kp",".kr",".kw",".ky",".kz",".la",".lb",".lc",".li",".lk",".lr",".ls",".lt",".lu",".lv",".ly",".ma",".mc",".md",".mg",".mh",".mk",".ml",".mm",".mn",".mo",".mp",".mq",".mr",".ms",".mt",".mu",".mv",".mw",".mx",".my",".mz",".na",".nc",".ne",".nf",".ng",".ni",".nl",".no",".np",".nr",".nu",".nz",".om",".pa",".pe",".pf",".pg",".ph",".pk",".pl",".pm",".pn",".pr",".ps",".pt",".pw",".py",".qa",".re",".ro",".ru",".rw",".sa",".sb",".sc",".sd",".se",".sg",".sh",".si",".sj",".sk",".sl",".sm",".sn",".so",".sr",".st",".su",".sv",".sy",".sz",".tc",".td",".tf",".tg",".th",".tj",".tk",".tm",".tn",".to",".tp",".tr",".tt",".tv",".tw",".tz",".ua",".ug",".uk",".um",".us",".uy",".uz", ".va",".vc",".ve",".vg",".vi",".vn",".vu",".wf",".ws",".ye",".yt",".yu",".za",".zm",".zr",".zw"]; 

var delay = (function(){ 
    var timer = 0; 
    return function(callback, ms){ 
     clearTimeout (timer); 
     timer = setTimeout(callback, ms); 
    }; 
})(); 

function isUrl(url){ 
     var regex = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)[email protected])?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i; 
     if(regex.test(url)){ 
      return regex.test(url); 
     }else{ 
      return regex.test("http://"+url); 
     } 
} 
function showHint(str) { 
delay(function(){ 
     str = str.toLowerCase(); 
     var dot = str.lastIndexOf("."); 
     var extension = str.substr(dot); 
     extension = extension.split('/')[0]; 
     var found = $.inArray(extension, extensions) > -1; 
     if (!isUrl(str)||!found) { 
      document.getElementById("txtHint").innerHTML = ""; 
      return; 
     } else { 
      var xmlhttp = new XMLHttpRequest(); 
      xmlhttp.onreadystatechange = function() { 
       if (this.readyState == 4 && this.status == 200) { 
        document.getElementById("txtHint").innerHTML = this.responseText; 
       } 
      }; 
      xmlhttp.open("GET", "gethint.php?q=" + str, true); 
      xmlhttp.send(); 
     } 
    }, 500) 
} 
</script> 
</head> 
<body> 

<p><b>Start typing a url in the input field below:</b></p> 
<form> 
Url: <input type="text" onkeyup="showHint(this.value)"> 
</form> 
<p><span id="txtHint"></span></p> 
</body> 
</html>

編輯：說你會開始http://www.example.net輸入。該AJAX會觸發「http://www.example.ne」，然後再添加最後一個字母。爲了避免這種情況，你可以嘗試「改變」而不是「keyup」事件。

EDIT2：現在會針對有效域擴展名列表

EDIT3：現在等待半秒發佈結果之前。

edit4：檢查擴展時的小疏漏，修正爲 extension = extension.split（'/'）[0];

另外，如果你想讓用戶在不使用「http：//」的情況下編寫URL，你需要一個編輯好的正則表達式，或者寫一個小的黑客文件，將它添加到你的字符串中，然後再發送到「isUrl ）」。

來源

2016-12-01 12:33:10 McCuz

非常感謝您......您可以編輯答案並填寫完整的代碼。 TIA @McCuz – AnnaLA

現在全部index.html代碼在回答。 – McCuz

你能告訴我怎麼做「keyup」事件，所以如果是walla.co和walla.com它不會發送兩次。 tia – AnnaLA

通過PHP和AJAX自動鏈接短路（bit.ly）

回答

相關問題