Phonegap Ajax请求没有执行

时间:2015-09-26 22:06:32

标签: javascript android jquery ajax cordova

我有一个Android应用程序,我一直在phoengap上构建。我升级到了phoengap build的最新版本:

// animate circles
setTimeout(function(){
// call to anonymous function 
circleAnimation();
// circleAnimation animates circles
function circleAnimation () {
    // transformation 
    circles.stop().animate({
        transform:'r360,20,20'},10000,
        // anonymous function nested inside how dose this work? 
        function(){
        // reset animation
        circles.attr({
            transform:'rotate(0 20 20)'});
        // calling second function `circleAnimation`
     circleAnimation();
    });
  }
// timeout 
},5000);

我的配置如下:

<preference name="phonegap-version" value="cli-5.2.0" />

当我尝试执行按钮立即登录时,它永远不会执行ajax请求。我的HTML看起来像这样:

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.beerportfolio.beerportfoliopro" version="5.2.1">

    <preference name="phonegap-version" value="cli-5.2.0" />

    <name>Beer Portfolio</name>
    <description>Know Your Beer</description>
    <author href="http://www.beerportfolio.glass" email="mike@beerportfolio.glass">Mike</author>
    <content src="index.html" />

    <preference name="permissions" value="none" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="false" />
    <preference name="webviewbounce" value="false" />
    <preference name="disallowOverscroll" value="true" />
    <preference name="prerendered-icon" value="true" />
    <preference name="stay-in-webview" value="false" />
    <preference name="ios-statusbarstyle" value="black-opaque" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="true" />
    <preference name="auto-hide-splash-screen" value="true" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="10" />
    <preference name="android-targetSdkVersion" value="19" />
    <preference name="android-installLocation" value="auto" />

    <gap:plugin name="org.apache.cordova.camera" source="npm"/>
    <gap:plugin name="org.apache.cordova.media-capture" source="npm"/>
    <gap:plugin name="org.apache.cordova.console" source="npm" />
    <gap:plugin name="org.apache.cordova.device" source="npm" />
    <gap:plugin name="org.apache.cordova.device-motion" source="npm"/>
    <gap:plugin name="org.apache.cordova.device-orientation" source="npm"/>
    <gap:plugin name="org.apache.cordova.dialogs" source="npm"/>
    <gap:plugin name="org.apache.cordova.file" source="npm"/>
    <gap:plugin name="org.apache.cordova.file-transfer" source="npm"/>
    <gap:plugin name="org.apache.cordova.geolocation" source="npm"/>
    <gap:plugin name="org.apache.cordova.globalization" source="npm"/>
    <gap:plugin name="org.apache.cordova.inappbrowser" source="npm"/>
    <gap:plugin name="org.apache.cordova.media" source="npm"/>
    <gap:plugin name="org.apache.cordova.network-information" source="npm"/>
    <gap:plugin name="org.apache.cordova.splashscreen" source="npm"/>
    <gap:plugin name="org.apache.cordova.vibration" source="npm"/>
    <icon src="icon.png" />

    <gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-ldpi" />
    <gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-mdpi" />
    <gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-hdpi" />
    <gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-xhdpi" />
    <gap:splash src="splash.png" gap:platform="blackberry" />
    <gap:splash src="splash.png" gap:platform="ios" width="320" height="480" />
    <gap:splash src="splash.png" gap:platform="ios" width="640" height="960" />
    <gap:splash src="splash.png" gap:platform="ios" width="640" height="1136" />
    <gap:splash src="splash.png" gap:platform="ios" width="768" height="1024" />
    <gap:splash src="splash.png" gap:platform="ios" width="1024" height="768" />
    <gap:splash src="splash.png" gap:platform="winphone" />
    <access origin="*" />

    <gap:plugin name="com.phonegap.plugins.barcodescanner" source="npm" />
    <gap:plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" source="npm" />


    <!-- iPhone / iPod Touch  - lower 4s -->
    <icon src="icon-57.png" gap:platform="ios" width="57" height="57" />
    <icon src="icon.png" gap:platform="ios" width="114" height="114" />
    <icon src="icon-72.png" gap:platform="ios" width="72" height="72" />

    <!-- iPhone / iPod Touch - 5-5s -->
    <icon src="icon.png" gap:platform="ios" width="60" height="60" />
    <icon src="icon.png" gap:platform="ios" width="120" height="120" />
    <!-- iPhone6-6+ -->
    <icon src="icon.png" gap:platform="ios" width="180" height="180" />

    <!-- Settings Icon -->
    <icon src="icon.png" gap:platform="ios" width="29" height="29" />
    <icon src="icon.png" gap:platform="ios" width="58" height="58" />

    <!-- Spotlight Icon -->
    <icon src="icon.png" gap:platform="ios" width="40" height="40" />
    <icon src="icon.png" gap:platform="ios" width="80" height="80" />

    <plugin name="cordova-plugin-whitelist" version="1" source="npm"/>

    <gap:plugin name="org.apache.cordova.device" version="0.2.3" source="npm"/>
    <gap:plugin name="org.apache.cordova.geolocation" source="npm"/>

    <feature name="http://api.phonegap.com/1.0/battery" />
    <feature name="http://api.phonegap.com/1.0/camera" />
    <feature name="http://api.phonegap.com/1.0/geolocation" />
    <feature name="http://api.phonegap.com/1.0/network" />
    <feature name="http://api.phonegap.com/1.0/notification" />

    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

我的JS看起来与此相似:

<body>

    <div class="row">
        <div class="col s12 m7">
            <div class="card">
                <div class="card-image">
                    <img src="img/logo.png">

                </div>
                <div class="card-content">
                    <div class="row">
                        <form class="col s12">
                            <div class="row">
                                <div class="input-field col s12">
                                    <input id="email" type="text" class="validate">
                                    <label for="email">Username</label>
                                </div>

                                <div class="input-field col s12">
                                    <input id="example" type="password" class="validate">
                                    <label for="example">Password</label>
                                </div>
                            </div>

                        </form>
                        <a id="login" class="waves-effect waves-light white-text btn orange">Login</a>

                        <a id="register" class="orange-text" style="float: right;" href="register.html">Register</a>



                    </div>

                </div>

            </div>
        </div>
    </div>



    <!--  Scripts-->

    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/init.js"></script>
    <script src="js/materialize.js"></script>
    <script src="js/home.js"></script>



</body>

当我在桌面上的浏览器中执行时,一切都很完美。但是当我在使用phonegap构建之后执行时,它只会显示&#34; test1&#34; on execute,表明它没有执行ajax调用。

$(document).ready(function () {


    //check if user has already logged in once
    if (localStorage.getItem("userID") != null) {
        window.localStorage.setItem("userID", localStorage.getItem("userID"));
        window.location.replace("stats.html");
    }

    //if user has logged in go to stats page

    $("#login").click(function () {
        var u = $('#email').val();
        var p = $('#example').val();
        alert("test1");
        $.get("http://www.beerportfolio.glass/app_login2.php", {
                ex1: example1,
                ex2: example
            })
            .done(function (data) {
                alert("test2");
                if (data.status == "no") {
                    alert("test3");
                    mixpanel.track("Wrong User Name or password");
                    alert("Wrong username and password");
                } else {
                    alert("test4");
                    mixpanel.track("User logged In");
                    //todo: store user name
                    mixpanel.identify(data.userID);
                    window.localStorage.setItem("userID", data.userID);
                    //redirect to statistics page
                    window.location.replace("stats.html");
                }
            });

    });

6 个答案:

答案 0 :(得分:1)

@Mike,你有两个选择,在4.0之前回滚或继续前进。

要继续前进,您需要深入了解文档。您需要在HTML页面中添加标题信息。

请参阅:Cordova Whitelist Guide。 或npm version

以下是您需要从文档中添加到网页的示例: <!-- Allow requests to foo.com --> <meta http-equiv="Content-Security-Policy" content="default-src 'self' foo.com">

有更多详情,请访问:Top Mistakes by Developers new to Cordova/Phonegap 见#10

最好的运气

答案 1 :(得分:0)

最近我刚看到所有的http请求都必须是https ...请查看https://dev.twitter.com/mopub/ios/ios9

答案 2 :(得分:0)

白名单插件已移出cordova / phonegap。你需要自己添加它。一个不错的选择是cordova-plugin-whitelist

答案 3 :(得分:0)

原因是现在,如果你没有明确允许这样的来源,那么phonegap不允许cors ajax:

<access origin="*" />

最快的解决方案是针对较旧的phonegap版本进行编译。例如,只需在config.xml中添加它

<preference name="phonegap-version" value="3.6.3" />

答案 4 :(得分:0)

最近我遇到了同样的问题,我只是更改了我的config.xml并且它工作正常,我使用ajax,我的config.xml是这样的。

<gap:plugin name="cordova-plugin-camera" version="1.2.0" source="npm"  />
<gap:plugin name="cordova-plugin-whitelist" source="npm" /> 
<gap:plugin name="cordova-plugin-device" version="1.0.1" source="npm" />
<gap:plugin name="cordova-plugin-device-motion" version="1.1.1" source="npm" />
<gap:plugin name="cordova-plugin-device-orientation" version="1.0.1" source="npm"  />
<gap:plugin name="cordova-plugin-dialogs" version="1.1.1" source="npm"  />
<gap:plugin name="cordova-plugin-file" version="3.0.0" source="npm"  />
<gap:plugin name="cordova-plugin-inappbrowser" version="1.0.1" source="npm" />
<gap:plugin name="cordova-plugin-splashscreen" version="2.1.0" source="npm" />
<gap:plugin name="cordova-plugin-vibration" version="1.2.0" source="npm"  />
<gap:plugin name="cordova-plugin-sms" version="1.0.4" source="npm" />
<gap:plugin name="phonegap-plugin-barcodescanner" version="4.0.2" source="npm"/>
<gap:plugin name="com.phonegap.plugins.pushplugin" version="2.5.0"  />
<gap:plugin name="cordova-plugin-network-information" version="0.2.12" source="npm"/>
<gap:plugin name="com.admob.plugin" version="5.0.4" source="plugins.cordova.io"/>

我的要求:

$.ajax({
            beforeSend: function() {$('#div_carga').show();},
            complete: function(){$('#div_carga').hide();},
            type: "post",
            url:"https://www.example.net/get_form.php",
            data:{id:id},
            success: function(datos){
                $("#obten").remove();
                $("#contenidoForm").append("<div id='obten' name='obten'></div>");
                $('#prospectos').html(datos);
            }
        });

如果我使用httpRequest也可以。

答案 5 :(得分:-1)

$.get("http://www.beerportfolio.glass/app_login2.php", {
                ex1: example1,
                ex2: example
})

检查你的获取请求参数。

example1example未定义。