Calling PHP webservice from JavaScript

Question

I am new to PHP and JavaScript development, I am trying to execute this code but it fails:

<?php
if(isset($_POST['username']) and isset($_POST['password'])) {

 // do logic for logining in (usually query your db)
if ($_POST['username'] == 'test' && $_POST['password'] == 'test') {
$data['success'] = true;
$data['message'] = 'Login succesful';
} else {
$data['success'] = false;
$data['message'] = 'Login failed';
}
// return json
echo json_encode($data);

}
?>

Here is the JavaScript file:

<script>
    $(document).ready(function() {
    alert("dddd");
        $('#loginForm').submit(function() {
            $('#output').html('Connecting....');
            var postTo = 'http://localhost/Login/login.php';
            alert(postTo);
            $.post(postTo,{username: $('[name=username]').val() ,   password: $('[name=password]').val()} , 
                function(data) {
                
                    if(data.message) {
                        alert(data);
                    } else {
                        $('#output').html('Could not connect');
                    }
                
                },'json');
            
            return false;
        });
    });
</script>

Please help.

Can you please provide more information on how it fails? Do you get a javascript error? Does data.message ever get alerted? — Taylor Dondich
– Taylor Dondich, Commented Mar 22, 2012 at 0:47
it displays the Connecting.... string , and does not alert (data.message). — FabTrex
– FabTrex, Commented Mar 22, 2012 at 0:52
But when i put a $('#output').html('Connecting....'); after $.post , it gets executed — FabTrex
– FabTrex, Commented Mar 22, 2012 at 0:53
will it be error if i dont define $data ? , i tried by removing all the if conditions and just the $data['success'] = true; $data['message'] = 'Login succesful';, and it displayed the created JSON in the browser, that is when i tried only from the browser — FabTrex
– FabTrex, Commented Mar 22, 2012 at 1:02
@user1284732, Yes, that's probably the problem. You can't use a variable without defining it. — mowwwalker
– mowwwalker, Commented Mar 22, 2012 at 1:11

mowwwalker · Accepted Answer · 2012-03-22 01:12:13Z

1

Assuming $data wasn't defined anywhere, this should fix it:

<?php
    $data = Array();
    if(isset($_POST['username']) and isset($_POST['password'])) {

         // do logic for logining in (usually query your db)
        if ($_POST['username'] == 'test' && $_POST['password'] == 'test') {
        $data['success'] = true;
        $data['message'] = 'Login succesful';
    } else {
        $data['success'] = false;
        $data['message'] = 'Login failed';
    }
    // return json
    echo json_encode($data);

    }
?>

answered Mar 22, 2012 at 1:12

mowwwalker

17.5k30 gold badges109 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michel · Accepted Answer · 2012-03-22 02:31:09Z

Funnily enough it works for me in Firefox. I had the problem with IE a while back and the solution was to add the correct headers to the top of the php script:

<?php
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
...

EDIT: Reproduced it by calling it from another machine. try to change var postTo = 'http://localhost/test/test.php'; to var postTo = 'test/test.php'; .

here's what I tested with ( I woud recommend you use firebug and console.log() instead of alert()):

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
 $('#output').html('somestuff');

    $('#loginForm').submit(function() {
        $('#output').html('Connecting....');
        var postTo = 'http://localhost/test/test.php';
        //alert(postTo);
        $.post(postTo,{username: $('[name=username]').val() ,   password:  $('[name=password]').val()} , 
            function(data) {

                if(data.message) {
                   //  console.log(data);
                    $('#output').html('Ya got it: '+ data.message);
                } else {
                    $('#output').html('Could not connect');
                }

            },'json');

        return false;
    });
});
</script>
</head>

<body>
<form id="loginForm">
    <input type="text" name="username" value="test"/>
    <input type="text" name="password" value="test"/>
    <input type="submit"  />
</form>
<div id="output"></div>
</body>

Eugen Rieck · Accepted Answer · 2012-03-22 00:50:41Z

0

if(isset($_POST['username']) and isset($_POST['password'])) {

should be

if(isset($_POST['username']) && isset($_POST['password'])) {

as a first correction.

answered Mar 22, 2012 at 0:50

Eugen Rieck

65.6k10 gold badges75 silver badges97 bronze badges

4 Comments

mowwwalker Over a year ago

Pretty sure that's not true. php.net/manual/en/language.operators.logical.php

mowwwalker Over a year ago

@user1284732, Yes, apparently the only difference is their operator precedence. php.net/manual/en/language.operators.precedence.php

Eli Over a year ago

@Walkerneo - Using "and" instead of "&&" simply means that if the first test fails, the second one will not be tested. This code works for the required purpose.

mowwwalker Over a year ago

@Eli, The page here: php.net/manual/en/language.operators.logical.php says that all four operators ||, &&, and, and or are short-circuit and that the difference is in their logical precedence.

ΣΚΟΤ · Accepted Answer · 2012-03-22 01:36:34Z

Install Firefox with Firebug extension, Open it using F12, Enable the 'NET', 'SCRIPT' and 'CONSOLE' tabs. Put a breakpoint in the script (around the alert(postTo)) using the SCRIPT tab. Refresh the page and step through it, monitoring the console. Use the NET tab to check that both the request and response of the php script is correct.

The code above works in my environment, (with the slight change of alert(data) to alert(data.message)). The following works for me:

login.php:

<?
if(isset($_POST['username']) and isset($_POST['password'])) {
// do logic for logining in (usually query your db)
if ($_POST['username'] == 'test' && $_POST['password'] == 'test') {
$data['success'] = true;
$data['message'] = 'Login succesful';
} else {
$data['success'] = false;
$data['message'] = 'Login failed';
}
// return json
echo json_encode($data);

}
?>

login.html:

<head>
<script type='text/javascript' src='jq/jquery.js'></script>

<script type='text/javascript'>
    $(document).ready(function() {
        alert("dddd");
        $('#loginForm').submit(function() {
            $('#output').html('Connecting....');
            var postTo = 'http://localhost/login.php';
            alert(postTo);
            $.post(postTo,{username: $('[name=username]').val() ,   password: $('[name=password]').val()} , 
                function(data) {

                    if(data.message) {
                        alert(data.message);
                    } else {
                        $('#output').html('Could not connect');
                    }

                },'json');

            return false;
        });
    });
</script>
</head>

<body>
<form id='loginForm'>
  <input type='text' id='username' name='username'/>
  <input type='text' id='password' name='password'/>
  <button type='submit'>Submit</button>
</form>
</body>

Collectives™ on Stack Overflow

Calling PHP webservice from JavaScript

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related