Phonegap Ajax 请求未执行

Question

我有一个在 phoengap 上构建的 Android 应用。我在 phoengap build 上升级到了最新版本：

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

我的配置是这样的：

<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>

当我现在尝试执行按钮登录时，它从不执行 ajax 请求。我的 html 看起来像这样：

<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>

而我的 JS 看起来是这样的：

$(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");
                }
            });

    });

当我在桌面上的浏览器中执行时，一切正常。但是当我在使用 phonegap build 构建后执行时，它只在执行时显示“test1”，这表明它没有执行 ajax 调用。

});

Answer 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

祝你好运

Answer 2

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

Answer 3

如果你没有像这样明确地允许 origing，现在 phonegap 不允许 cors ajax：

<access origin="*" />

最快的解决方案是针对较旧的 phonegap 版本进行编译。例如，只需将其添加到您的 config.xml

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

Answer 4

最近我遇到了同样的问题，我只是更改了我的 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 也可以。

Answer 5

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

Answer 6

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

检查您的获取请求参数。

example1 和 example 未定义。