Question

我正在使用JSONP我的目标很简单，返回的数据必须显示在我的div中。代码当前不显示任何内容。我还在我的项目中集成了jquery.jsonp.js：

                 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>

任何人都可以帮我显示输出

Answer 1

首先，删除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中

原始文字：

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

哦，我强烈建议您将应用程序代码放在关闭正文标记之前。

实现JSONP功能

1 个答案: