stackoom
  简体   繁体   中英

Phonegap Ajax request not executing

 原文  2015-09-26 22:06:31  0   6    javascript/ android/ jquery/ ajax/ cordova

Question

I have an Android app that I have been building on phoengap. I upgraded to the newest version on phoengap build: 

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

And my config looks like this: 

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

When I try and execute a button to log in now, it never executes the ajax request. My html looks like this: 

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

And my JS looks similar to this: 

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

    });

When I execute in my browser on my desktop all works perfect. But when I execute after building with phonegap build, It only shows "test1" on execute which shows its not executing the ajax call. 

});

6 answers

solution1
 1  2015-09-27 22:51:35

@Mike,
you have two options, rollback before 4.0 or move forward.

To move forward, you need to read deeper into documentation. You need to add header information in your HTML page.

See: Cordova Whitelist Guide . or the npm version

Here is an example of what you need to add to your webpage from the documentation: <!-- Allow requests to foo.com --> <meta http-equiv="Content-Security-Policy" content="default-src 'self' foo.com">

Even more details are available at:
Top Mistakes by Developers new to Cordova/Phonegap See #10

Best of Luck

solution2
 0  2015-09-26 22:51:19

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

solution3
 0  2015-09-27 00:11:01

The whitelist plugin has moved out of cordova/phonegap. You need to add it yourself. A good choice is cordova-plugin-whitelist .

solution4
 0  2015-10-02 12:56:41

The reason is now phonegap does not allow cors ajax if you did not explicitly allow the origing like this: 

<access origin="*" />

The fastest solution is to compile against an older phonegap version. For example just add this in your config.xml 

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

solution5
 0  2015-10-02 17:03:11

recently i had the same problem, i just change my config.xml and it works, i use ajax, my config.xml is like this. 

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

my request: 

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

if i use httpRequest also it works.

solution6
 -1  2015-09-28 06:11:24

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

Check your get request params.

example1 and example are undefined.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Phonegap AJAX request undefined Issues executing an AJAX request Ajax call on phonegap not sending request Phonegap Ajax request to port 8000 PhoneGap not issuing AJAX (jsonp) request Django Ajax Request Not Executing Properly rails jquery ajax request not executing AJAX post request working in browser, not on Phonegap App Local Ajax request / Sencha / PhoneGap on Android Phonegap not executing ajax script (REST call towards the back-end)
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM