如何将AJAX JSONP数据传递给函数?

时间:2013-05-14 17:52:47

标签: json jquery jsonp

我已经问了一个类似的问题,但我发现我需要使用AJAX和JSONP,这开辟了一个全新的伤害世界。

我与之合作的公司拥有其隐私政策和使用条款的API。我需要创建两个不同的页面:

  • 隐私政策
  • 使用条款

所以基本上我需要搜索从他们那里得到的数据,在“tags”中找到正确的术语(分别是“ext_privacy”和“ext_member_terms”),然后使用该数组中的HTML代码这页纸。

问题是,我无法弄清楚如何将这些数据从AJAX传递给函数,即使在那时,我也不知道如何适当地深入研究这些部分 - 我认为它会是< em> external.data.results.tags ,但这似乎不起作用。

这是我的网站代码:

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title>Privacy Policy</title>
</head>
<body>
    <div id="data">
    </div>
    <script>

        $.ajax({
            type: 'GET',
            url: 'http://guywhogeeks.com/test/test.json',
            jsonpCallback: 'jsonCallback',
            contentType: 'application/json',
            cache: 'true',
            dataType: 'jsonp',
            success: dataFeed
        });

        function dataFeed(external) {

            //Establishing htmlString - testing to see if function even fires
            var htmlString = "Hello, world!";

            //I know this is WAY off - I wanted to add the HTML to htmlString
            /*$(external.data.results.tags).find(privacy).each(function() {

                $({
                    text : external.data.results.html
                }).appendTo(htmlString)

            });*/

            $('#data').html(htmlString);
        }
    </script>
</body>
</html>

这是(略微修改过的)JSON - 也托管了here

{"code":200,"status":"Ok","data":
    {"offset":0,"limit":20,"total":2,"target":"html_page","results":[
        {
            "id":"6",
            "title":"Privacy Policy",
            "description":"Privacy Policy",
            "html":"<div class=\"right-rail\">\r\n<div class=\"module\">\r\n<h2 class=\"episode-guide-header\">Web Site Privacy Policy<\/h2>\r\n<div class=\"module-body corp-home-top\">\r\n<div class=\"corp-home-wrapper privacy\">\r\n<\/div>\r\n<!--corp-home-wrapper--><\/div>\r\n<!--module-body corp-home-top-->\r\n<div class=\"module-shadow\">&#160;<\/div>\r\n<\/div>\r\n<!--module--><\/div>\r\n<!--right-rail-->",
            "tags":[
                "ext_privacy"
            ]
        },
        {
            "id":"66",
            "title":"License and TOU",
            "description":"License Agreement and Terms of Use",
            "html":"<!DOCTYPE html>\r\n<html>\r\n    <head>\r\n        <title>License Agreement and Terms of Use<\/title>\r\n    <\/head>\r\n    <body>\r\n       <div class=\"right-rail\">\r\n<div class=\"module\">\r\n<h2 class=\"episode-guide-header\"> License Agreement and Terms of Use<\/h2>\r\n<\/div><\/body>\r\n<\/html>",
            "tags":[
                "ext_member_terms"
            ]
        }
    ]}
}

我很感激你能给我的任何帮助。

1 个答案:

答案 0 :(得分:1)

您的JSONP有效负载不正确。您的服务器应该返回对“回调”函数的调用...在您的示例中,服务器应该返回:

jsonCallback(
{"code":200,"status":"Ok","data":
    {"offset":0,"limit":20,"total":2,"target":"html_page","results":[
        {
            "id":"6",
            "title":"Privacy Policy",
            "description":"Privacy Policy",
            "html":"<div class=\"right-rail\">\r\n<div class=\"module\">\r\n<h2 class=\"episode-guide-header\">Web Site Privacy Policy<\/h2>\r\n<div class=\"module-body corp-home-top\">\r\n<div class=\"corp-home-wrapper privacy\">\r\n<\/div>\r\n<!--corp-home-wrapper--><\/div>\r\n<!--module-body corp-home-top-->\r\n<div class=\"module-shadow\">&#160;<\/div>\r\n<\/div>\r\n<!--module--><\/div>\r\n<!--right-rail-->",
            "tags":[
                "ext_privacy"
            ]
        },
        {
            "id":"66",
            "title":"License and TOU",
            "description":"License Agreement and Terms of Use",
            "html":"<!DOCTYPE html>\r\n<html>\r\n    <head>\r\n        <title>License Agreement and Terms of Use<\/title>\r\n    <\/head>\r\n    <body>\r\n       <div class=\"right-rail\">\r\n<div class=\"module\">\r\n<h2 class=\"episode-guide-header\"> License Agreement and Terms of Use<\/h2>\r\n<\/div><\/body>\r\n<\/html>",
            "tags":[
                "ext_member_terms"
            ]
        }
    ]}
});

在您的客户端中,您应该定义“jsonCallback”,如:

jsonCallback(data) {
// data is a regular javascript object at this point
// so you can access 'data.data.results[0].html' without a problem
}

检查以获取更多信息:http://en.wikipedia.org/wiki/JSONP

希望它有所帮助。