title: Sending and receiving JSON data | PhoneGap + Jquery Mobile app using ajax()
body: <p>I'm developing a PhoneGap application with jQuery Mobile 1.3.1 &amp; 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.</p>
  
  <p>I use the following JavaScript for the ajax login.</p>
  
  <pre><code>$('#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");
          }
      });
  });
  </code></pre>
  
  <p>Here is my html code for the login form.</p>
  
  <pre><code>&lt;div data-role="content"&gt;
       &lt;form id="login-form" data-ajax="false" method="post"&gt;
          &lt;fieldset&gt;
             &lt;input type="text" name="username" id="username" value="subin" placeholder="Username"&gt;
             &lt;input type="password" name="password" id="password" value="passwordx" placeholder="Password"&gt;
             &lt;input type="button" data-theme="b" name="submit" id="submit" value="Enter" data-icon="plus"&gt;
          &lt;/fieldset&gt;
       &lt;/form&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>But this just don't work. The server returns login failure error, although it works fine for other apps.</p>