Question

我有以下HTML代码：

<!DOCTYPE html> 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <script src="js/jq.js"></script>
        <script src="js/jqm.js"></script>
        <script src="js/jstore.js"></script>
        <script src="js/progressbar.js"></script>
        <script src="js/sql.js"></script>
        <script src="js/phonegap-1.4.1.js"></script>
        <script src="js/sha512.js"></script>
    </head>
    <body>
        <!-- Start of first page: #one -->
        <div data-role="page">
            <!-- header -->
            <div data-role="header">
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>

                        </td>
                        <td>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- /header -->
            <div data-role="content" data-theme="a">
                <center>
                    <span class="progressBar" id="pb1"></span>
                    <br />
                    Initial Syncronisation in progress!
                </center>
            </div>  
            <!-- footer -->
            <div data-role="footer">

            </div>
            <!-- /footer -->
            <script lang="text/javascript">
                document.addEventListener("deviceready", onDeviceReady, false);
                function onDeviceReady() {
                   $("#pb1").progressBar();
                   $("#pb1").progressBar(5);
                   $.ajax({
                        url: 'https://url/user/'+$.jStorage.get("username","false")+'/modeSet/'+$.jStorage.get("password","false")+'/subSequence/'+hex_md5(new Date().getTime())+'.html',
                        dataType:'jsonp',
                        jsonp:'jsonp_callback',
                        jsonpCallback:'infoData',
                         success: function (data) {
                                alert('success');
                       },
                       error:function (xhr, ajaxOptions, thrownError){
                            alert(xhr.status);
                            alert(thrownError);
                        } 
                   });
                }
            </script>
        </div>
    </body>
</html>

当我调用该页面时，我收到代码200的错误和一个包含以下内容的附加警告框：

Error: infoData was not called!

它正在使用Android 4.0.4在真正的三星Galaxy S2上运行。我有一个互联网连接，但我不知道我哪里出错了。

服务器返回的文件：

infoData({"validJsonDocument":"yes"});

我正在使用带有jQuery 1.7.1和jQuery mobile up2date的Phonegap 1.4.1

其他图书馆实际上没有使用。

Answer 1

JSONP代表带有填充的JSON。填充表示在将JSON响应发送回客户端时包围JSON响应的函数名称。

当收到结果时，它实际上被视为纯JavaScript，并按原样处理。因此，调用围绕JSON的函数。

这意味着为了让JSONP正常工作，必须在DOM中加载一个与包装JSON响应的函数名称相匹配的函数。

此外，您已使用"jsonCallback" jQuery AJAX property指定了“infoData”作为回调函数的名称：

jsonpCallback    String, Function

指定JSONP请求的回调函数名称。将使用此值代替jQuery自动生成的随机名称。最好让jQuery生成一个唯一的名称，因为它可以更容易地管理请求并提供回调和错误处理。如果要为GET请求启用更好的浏览器缓存，可能需要指定回调。从jQuery 1.5开始，你也可以使用一个函数进行这个设置，在这种情况下，jsonpCallback的值被设置为该函数的返回值。

尝试在名为“infoData”的页面上定义一个函数，该函数只接受一个参数，这将使您通过此错误。

function infoData(jsonObj) {
    alert(JSON.stringify(jsonObj));  // print the raw JSON object
    alert(jsonObj.validJsonDocument); // access the property in your JSON object.
}

或者，您可以采用jQuery文档的建议并完全删除jsonpCallback选项，并依赖您已经定义的成功回调。

Answer 2

我将代码修改为以下内容：

<script lang="text/javascript">
            document.addEventListener("deviceready", onDeviceReady, false);
            function onDeviceReady() {
               $("#pb1").progressBar(5);
               $.ajax({           
                    url: 'http:url/jsonp.html', 
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    jsonpCallback: 'jsonpCallback',
                    success: function (data) {
                            $("#pb1").progressBar(25);
                            alert(data.version);
                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        alert(xhr.status);
                        alert(thrownError);
                    }                       
                }); 

            }
            function jsonpCallback(data){
                alert(data.message);
            }
        </script>

如果我在谷歌浏览器中打开该页面，它可以正常运行。如果我在android浏览器中打开它，它会做同样的事情。给我一个错误200，并说我没有调用jsonpCallback。我真的不知道脚本为什么会让我这么难过。克里斯

从Phonegap和jQuery中调用JSONP时出现未知错误

2 个答案: