Sending and receiving JSON data | PhoneGap + Jquery Mobile app using ajax()

ajax jquery cordova jquery-mobile

49,791

Solution 1

You have several error is your code:

Change date to data

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

Remove this line, it will prevent Phonegap from successful posting:
```
xhrFields  : {withCredentials: true},
```
In your beforeSend and complete use this function to show loader:
```
$.mobile.loading('show');
```
and
```
$.mobile.loading('hide');
```
your current ones are deprecated in jQuery 1.2+.

Your final code should look like this:

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

Proof that it is working, just run it from the disk and not from a server because you will get a CROSS domain error:

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

Solution 2

You have a type here:

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

try changing to this:

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

49,791

Author by

C--

Updated on August 08, 2022

Comments

C-- over 1 year

I'm developing a PhoneGap application with jQuery Mobile 1.3.1 & jQuery JavaScript Library v1.9.1. I have a login form with a username and a password. There is a JSON api which can send and receive JSON data for processing the login.

I use the following JavaScript for the ajax login.

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

Here is my html code for the login form.

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

But this just don't work. The server returns login failure error, although it works fine for other apps.

Maya Kathrine Andersen almost 11 years

Just tried your final code, and it looks like it works from the server too. I'm not getting a cross domain error - and it's deployed to my Ipad.
C-- almost 11 years

Actually the typo wasn't there in the code. Still the code doesn't work. :( Could be a server side issue as well, let me try.
C-- almost 11 years

Thanks for the typo note, it was not there in the code since I changed it after posting this question.
C-- almost 11 years

Also, I cannot remove xhrFields : {withCredentials: true} since the api needs to be contacted in a session free manner.
Gajotres almost 11 years

Unfortunately my example didn't work with that line. As soon as I removed it everything success callback was executed.
C-- almost 11 years

Ok, I will try to figure it out and will update you. I'm accepting this answer. Thanks @Gajotres
Marged over 8 years

Please don't only provide a link, mention the relevant stuff