Создать TinyURL с помощью вызова Jquery Ajax - PullRequest
2 голосов
/ 12 сентября 2009

Я просмотрел схожие вопросы по SO, но, похоже, не могу найти ни одного ответа на вопрос, который выглядит как простой вызов ..

function TweetThis(url)
{
    $.ajax({
      url: "http://tinyurl.com/api-create.php?url=" + url,
      cache: false,
      success: function(data){
       alert(data);
      }
    });
}

Обычно я хочу позвонить в TinyURL с помощью Ajax-вызова и длинного URL-адреса и вернуть сокращенный URL-адрес. Успех никогда не срабатывает, но когда я проверяю созданный URL-адрес, он нормально возвращается в браузер.

Глядя в Firebug, он не показывает ответ, возвращающийся ... что мне не хватает?

Ответы [ 6 ]

4 голосов
/ 13 октября 2009

Попытка сделать обычный AJAX-запрос невозможна из-за той же политики происхождения ограничений. К счастью, JSONP API предоставлено Реми Шарпом .

Вот рабочий код:

function TweetThis(bigurl)
{
    $.getJSON(
      "http://json-tinyurl.appspot.com/?&callback=?",
      {url: bigurl},
      function(data){
       alert(data.tinyurl);
      }
    );
}
2 голосов
/ 21 марта 2012

никогда не использовал его, но, возможно, стоит проверить. http://tiny -url.info / open_api.html

Если у вас есть возможность добавить логику на стороне сервера, вы можете избежать требования для JSONP, установив "shim" или скрипт шлюза, который делает то, что вы хотите, и возвращает отформатированную строку JSON.

некоторые примеры скриптов, которые создают tinyurls, вызывая API tinyurl.com:

Каждый может взять этот код и разместить его самостоятельно, чтобы веб-страницы могли получить доступ к сервису tinyurl. Тот же подход работает для любого сервиса, который не доступен через JSONP.

1 голос
/ 08 сентября 2011

Попробуйте это.

Сценарий:

<script language="javascript" type="text/javascript">
<!-- 
var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser is very old!");
            }
        }
    }

//Browser Support Code
function ajaxGetTiny(){

    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('ajaxDisplayTiny');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;

        }
    }
        var long_url = document.getElementById('long_url').value;


    var queryString = "?long_url=" + long_url;
    ajaxRequest.open("GET", "getTiny.php" + queryString, true);
    ajaxRequest.send(null); 

}

function ClipBoard() 
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}
//-->

</script>

Теперь форма:

<form name='myForm'>
      <input name="long_url" type="text" class="main" size="90">
      <br>
        <input type='button' class="Buttons" onclick='ajaxGetTiny();' value='GET TINY' />
      </form>

Теперь вспомогательный файл:

<? 
//gets the data from a URL  
function get_tiny_url($url)  {  
    $ch = curl_init();  
    $timeout = 5;  
    curl_setopt($ch,CURLOPT_URL,'http://tinyurl.com/api-create.php?url='.$url);  
    curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);  
    curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);  
    $data = curl_exec($ch);  
    curl_close($ch);  
    return $data;  
}

//test it out!
$new_url = get_tiny_url($_GET['long_url']);

?>
<link href="../styles.css" rel="stylesheet" type="text/css" />


<table width="100%" border="0" class="main">
<tr>
            <td width="5%" align="left" valign="middle"><strong>longURL:</strong></td>
            <td width="95%" valign="middle" class="ArticleBody"><? echo $_GET['long_url']; ?></td>
  </tr>
          <tr>
            <td align="left" valign="middle"><strong>tinyURL:</strong></td>
            <td valign="middle" class="ArticleBody"><SPAN ID="copytext"><? echo $new_url; ?></SPAN> 
            <TEXTAREA ID="holdtext" STYLE="display:none;"></TEXTAREA><br>
            <BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON>
</td>
  </tr>
        </table>
1 голос
/ 13 октября 2009

Вы пытались добавить &callback=? в конец URL? Это может помешать безопасности браузера.

1 голос
/ 12 сентября 2009

В Safari 4 (Mac OS X) он работает нормально.
В Firefox 3 (Mac OS X) он работает наполовину - появляется диалоговое окно alert, но оно пустое (поэтому success запускается, но данные не возвращаются).
Кажется, это ошибка Firefox.

0 голосов
/ 12 сентября 2009

Это должно работать

function TweetThis(url){
    $.get(
        "http://tinyurl.com/api-create.php",
        {url: url},
        function(data){
            alert(data);
        }
    );
}
...