web-dev-qa-db-fra.com

Envoi et réception de données JSON | Application PhoneGap + Jquery Mobile utilisant ajax ()

Je développe une application PhoneGap avec jQuery Mobile 1.3.1 & jQuery JavaScript Library v1.9.1. J'ai un formulaire de connexion avec un nom d'utilisateur et un mot de passe. Il existe une API JSON qui peut envoyer et recevoir des données JSON pour le traitement de la connexion.

J'utilise le code JavaScript suivant pour la connexion ajax.

$('#submit').bind('click', function(e)  {
    e.preventDefault();
    $.ajax({
        type       : "POST",
        url        : "http://domainx/public/login",
        xhrFields  : {withCredentials: true},
        crossDomain: true,
        beforeSend : function() {$.mobile.showPageLoadingMsg();},
        complete   : function() {$.mobile.hidePageLoadingMsg();},
        data       : {username : 'subin', password : 'passwordx'},
        dataType   : 'json',
        success    : function(response) {
            console.error(JSON.stringify(response));
        },
        error      : function() {
            console.error("error");
        }
    });
});

Voici mon code html pour le formulaire de connexion.

<div data-role="content">
     <form id="login-form" data-ajax="false" method="post">
        <fieldset>
           <input type="text" name="username" id="username" value="subin" placeholder="Username">
           <input type="password" name="password" id="password" value="passwordx" placeholder="Password">
           <input type="button" data-theme="b" name="submit" id="submit" value="Enter" data-icon="plus">
        </fieldset>
     </form>
  </div>

Mais ça ne marche pas. Le serveur renvoie une erreur d'échec de connexion, bien que cela fonctionne correctement pour les autres applications.

ajaxjquerycordovajquery-mobile
10
Subin Sebastian

Vous avez plusieurs erreurs est votre code:

  1. Changer la date en données

    data       : {username : 'subin', password : 'passwordx'},

  2. Supprimez cette ligne, cela empêchera Phonegap d’enregistrer correctement:

    xhrFields  : {withCredentials: true},

  3. Dans votre beforeSend et complet, utilisez cette fonction pour afficher le chargeur:

    $.mobile.loading('show');

    et 

    $.mobile.loading('hide');

    ceux qui sont actuellement utilisés sont obsolètes dans jQuery 1.2+.

Votre code final devrait ressembler à ceci:

$.ajax({
    type       : "POST",
    url        : "http://domain/public/login",
    crossDomain: true,
    beforeSend : function() {$.mobile.loading('show')},
    complete   : function() {$.mobile.loading('hide')},
    data       : {username : 'subin', password : 'passwordx'},
    dataType   : 'json',
    success    : function(response) {
        //console.error(JSON.stringify(response));
        alert('Works!');
    },
    error      : function() {
        //console.error("error");
        alert('Now working!');                  
    }
});

La preuve que cela fonctionne, exécutez-le simplement à partir du disque et non d'un serveur car vous obtiendrez une erreur de domaine CROSS:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>          
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
        <script>
    $.ajax({
        type       : "POST",
        url        : "http://domain/public/login",
        crossDomain: true,
        beforeSend : function() {$.mobile.loading('show')},
        complete   : function() {$.mobile.loading('hide')},
        data       : {username : 'subin', password : 'passwordx'},
        dataType   : 'json',
        success    : function(response) {
            //console.error(JSON.stringify(response));
            alert('Works!');
        },
        error      : function() {
            //console.error("error");
            alert('Not working!');                  
        }
    });     
        </script>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">

            </div>
        </div>    
    </body>
</html>
7
Gajotres

Vous avez un type ici:

    date       : {username : 'subin', password : 'passwordx'},
//--^^^^----this should be named data

essayez de passer à ceci:

    data       : {username : 'subin', password : 'passwordx'},
1
Jai

utiliser le type de données jsonp

 dataType   : 'jsonp'

permet inter-domaine

0
AJchandu