Ajax/PHP login form - developing an android app(Jquery.mobile) using phonegap

Question

My Index.html file code as follows:

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>Mindcorpus - Placement</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-mobile.js" type="text/javascript"></script>
<script src="/cordova.js" type="text/javascript"></script>
<script>
$(function()
{
$('#frm').submit(function()
{
    var username = $('#textinput').val();
    var username = $.trim(username);
    var password = $('#passwordinput').val();
    var password = $.trim(password);
    if(username=='')
    {
        $('.error').html('Please enter username');
        return false;
    }
    else if(password =='')
    {
        $('.error').html('Please enter password');
        return false;
    }
    else
    {
        var user = $('[name=username]').val();
        var pass = $('[name=password]').val();
        $.ajax({
        type: 'POST',
        url: 'http://localhost/mc-new/admin/mobile1/process.php',
        data: { username: user, password: pass},       
        success: function(data){
            alert(data.success);
        },
        error: function(){
            alert('error!');
        }
    });
 return false;
    }
});
});
</script>
</head> 
<body> 
<div data-role="page" id="page">
<div data-role="header">
    <h1><img src="images/logo.png" /></h1>
</div>
<div data-role="content">
    <div class="error"></div>
    <form action="" method="post" id="frm">
      <div data-role="fieldcontain">
        <input type="text" name="username" placeholder="Username" id="textinput" value=""  />
    </div>
      <div data-role="fieldcontain">
        <input type="password" name="password" placeholder="******" id="passwordinput" value=""       />
    </div>
      <button data-icon="arrow-r" type="submit">Submit</button>
    </form>
</div>
<div data-role="footer">
    <h4 style="font-weight:normal">Powered By: Mind Processors</h4>
</div>
 </div>
 </body>
</html>

And my process.php file is:

<?php
if(isset($_POST['username']) || isset($_POST['password'])) 
{
    $data['success'] = 'Done';
    echo json_encode($data);
}
?>

This functions is properly working when I use localhost on my browser. BUt when I use Dreamweaver and build & Emulate this site. It always alert error. The Ajax is not functioning in emulator. The request is not passed to process file. Please help me & sort out this problem.

see this http://stackoverflow.com/questions/921130/jquery-on-iphone-android-blackberry — Rohit, Sep 12 '13 at 10:18
This looks like more of a PHP issue than cordova/jquery/ajax. First be sure that your php page is not getting hit by the request. Log it somewhere or check in apache log (if you are using apache). — pers3us, Sep 12 '13 at 10:45
localhost resolves to the android emulator, not your computer. Check this question: http://stackoverflow.com/questions/5806220/how-to-connect-to-my-http-localhost-web-server-from-android-emulator-in-eclips — Marcelo, Sep 12 '13 at 18:52

score 0 · Answer 1 · answered Apr 20 '15 at 04:52

You need to specify in the ajax that the expected return data type is JSON and also cross domain has to be enabled.

Try the below code for the ajax,

$.ajax({
    type: 'POST',
    url: 'http://localhost/mc-new/admin/mobile1/process.php',
    crossDomain: true,
    data: { username: user, password: pass},
    dataType: 'json',
    success: function(data){
        alert(data.success);
    },
    error: function(){
        alert('error!');
}

And also add the following in your php file,

<?php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Max-Age: 1000');
header('Content-Type: application/json');

if(isset($_POST['username']) || isset($_POST['password'])) 
{
    $data['success'] = 'Done';
    echo json_encode($data);
}
?>

Hope this helps to someone who falls onto this question, looking for an answer.

Ajax/PHP login form - developing an android app(Jquery.mobile) using phonegap

1 Answers1