Jquery Mobile + Phonegap Post Data ke Server (cross-domain)

Mengembangkan aplikasi mobile menggunakan phonegap merupakan hasil kompilasi code. Walau pengembangan pada dasarnya menggunakan html. Terdapat perbedaan ketika melakukan penge-test-an antara menggunakan browser langsung dengan menggunakan browser mobile hasil kompilasi. Karena sesungguhnya phonegap memungkinkan aplikasi yang kita buat untuk mengakses cross-domain (external host).

Jadi, contoh yang saya berikan ini tidak akan berjalan ketika di test menggunakan browser desktop, namun akan berjalan ketika menggunakan emulator atau device sesungguhnya.

Disini saya menggunakan jquery mobile untuk tampilan, proses yang digunakan.

HTML Form
Untuk tampilan html form dibuat sederhana:

Username:


Password:< input id="pass" type="password" name="pass" />
<input id="submit" type="submit" name="submit" value="Login" data-theme="e" />

Jquery Mobile

Lalu untuk bagian jquery mobile, bagian yang memproses hasil data yang di input pada form. Akan dilempar ke domain yang dituju. Disini, saya menggunakan fungsi $.post. Seharusnya menggunakan fungsi $.ajax pun bisa, karena tidak jauh berbeda.

$(document).ready(function() {
$("#submit").click(function() {
var postTo = 'http://yourdomaian.com/file.php';
$.post(postTo,{username: $('[name=username]').val() , pass: $('[name=pass]').val()} ,
 function(data) {
   if(data.message) {
      $('#output').html(data.message);
    }
   } else {
      $('#output').html('Could not connect');
}
},'json');
return false; }); });

FILE PHP
Lalu untuk file php yang berada di domain singkatnya :

< ?php 
if(isset($_POST['username'] and isset($_POST['password'])) { 
   if ($_POST['username'] == 'test' and $_POST['password'] == 'test') { 
       $data['success'] = true; $data['message'] = 'Login succesful'; 
   } else { 
       $data['success'] = false; $data['message'] = 'Login failed'; 
   } 
echo json_encode($data); } 
?>

done