2014-02-13 2 views
-1

Я использую JSONP, моя цель проста, данные должны отображаться в моем div. В настоящее время код ничего не отображает. Я также интегрирован jquery.jsonp.js в моем проекте мой путь:Реализация функции JSONP

    PRJFOLDER->WEBPages->JavaScript->query.jsonp.js 

файл index.html в пути:

    PRJFOLDER->WEBPages->index.html 

Мой код:

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>JSP Page</title> 
     <script type="text/javascript" src="http://www.jquery4u.com/function-demos/js/jquery-1.6.4.min.js"></script> 
     <script> 
      function getData(url, data, callback) { 
      $.ajax({ 
       url : url, 
       type : 'post', 
       jsonp: "callback", // Needed for jsonp 
       dataType: "jsonp", // Also needed for jsonp 
       timeout : timeout, 
       data : data || {}, 
       success : function(data) { 
       callback(data); 
       } // Omitted failure for this example 
      }); 
      } 
     </script> 

    </head> 
    <body> 
     <h1>Hello World!</h1> 
     <script> 
       var data = {}; 
       var url = 'http://feeds.delicious.com/v2/json/popular?callback=?' 

       getData(url, {}, function(result) { 
       console.log(result); 
       data = result; 
       }); 

       $('#post-result').append(JSON.stringify(data)); 
     </script> 

     <div id='post-result'></div> 
    </body> 
</html> 

Может ли кто-нибудь помочь мне в отображении вывода

+2

Что такое 'jquery.jsonp.js'? –

+2

Если jsonp.js использует jQuery, тогда вам нужно изменить порядок своих сценариев. – Anton

+1

Включая вас в неправильном порядке. –

ответ

2

Во-первых, удалите jsonp. В этом нет необходимости. Теперь помните, что когда вы используете jsonp, сервер отправляет функцию как возвращаемое значение вместо объекта.

К счастью, jquery поддерживает jsonp и даст объект буквальный как значение. Просто убедитесь, что ваш api-url поддерживает jsonp.

Смотрите ниже код:

function getData(url, data, callback) { 
$.ajax({ 
    url : url, 
    type : 'post', 
    jsonp: "callback", // Needed for jsonp 
    dataType: "jsonp", // Also needed for jsonp 
    timeout : timeout, 
    data : data || {}, 
    success : function(data) { 
    callback(data); 
    } // Omitted failure for this example 
}); 

После этого, вам нужно будет сделать функцию, чтобы получить значение:

var data = {}; 
var url = 'http://feeds.delicious.com/v2/json/popular?callback=yourFunction' 

getData(url, {}, function(result) { 
console.log(result); 
data = result; 
}); 

Теперь, когда вы получили ваши данные, вы можете легко добавить это в вашем HTML с помощью шаблонов или в качестве исходного текста

Raw текст:

$('#post-result').append(JSON.stringify(data)); 

О, и я настоятельно рекомендую вам поставить код приложения непосредственно перед закрывающим тегом тела.

Смежные вопросы