PHP Code Returns Its Script and Doesn't Work in JQuery Ajax

Question

I would like to do a web site using Aptana IDE and xampp, and it has a few pages. Index page is where all users which does not log in the system and home is where all users which does log in the system must visit. I am very new to develop web site.

I decided to use Ajax for log in sign up pages. It was actually works properly. But now I do not know why it does not.

In my login.html page

<form id="login-form" class="text-left" method="post">
                <div class="main-login-form">
                    <div class="login-group">
                        <div class="form-group">
                            <label for="lg_username" class="sr-only">Username</label>
                            <input type="text" class="form-control" id="lg_username" name="username" placeholder="username"
                                   data-container="body" data-toggle="popover" data-placement="left" data-content=""
                                   value="">
                        </div>
                        <div class="form-group">
                            <label for="lg_password" class="sr-only">Password</label>
                            <input type="password" class="form-control" id="lg_password" name="password" placeholder="password" 
                                   data-container="body" data-toggle="popover" data-placement="left" data-content="">
                        </div>
                        <div class="form-group login-group-checkbox">
                            <input type="checkbox" id="lg_remember" name="lg_remember">
                            <label for="lg_remember">remember</label>
                        </div>
                    </div>
                    <button type="submit" class="login-button">Submit</button>
                </div>
            </form>

and form validate with JQuery validation

$(document).ready(function () {
        $('#login-form').validate({
    rules: { //rules goes here},
    messages: { //messages goes here},
    submitHandler: submitForm
});

It works correctly. All my rules are implemented.

submit function:

function submitForm(){
            var username = $('#lg_username').val();
            var password = $('#lg_password').val();
            var checkbox = $('#lg_remember').is(":checked");

            var strAjax = "username=" + username + "&password=" + password + "&checkbox=" + checkbox;
            alert(strAjax);
            $.ajax({
                type: 'POST',
                url: 'loginAjax.php',
                data: strAjax,
                cache: false,
                success: function(data) {
                    alert(data);
                    if(data == "1") {
                        window.location.href = "home.php";
                    }
                    else {
                        //Error messages
                    }
                }
            });
            return false;
            }

loginAjax.php file:

<?php
require_once 'dbcon.php';
session_start();

$username = mysql_real_escape_string($_POST["username"]);
$password = mysql_real_escape_string($_POST["password"]);

$sql = "SELECT * FROM tbl_user WHERE userName = '$username' AND password = '$password'";

$result = mysql_query($sql);
$count = mysql_num_rows($result);
$row = mysql_fetch_array($result);

if($count == 1){
    if($_POST['checkbox'] == TRUE) {
        if(!isset($_COOKIE['name'])) {
            setcookie( 'name', $row['userName'], time() + (86400 * 30) );
        }
    }
    $_SESSION['user_session'] = $row['userName'];
    echo TRUE;
}
else {
    echo FALSE;
}
?>

dbcon.php file connect to mysql database. I try to control is it enter the ajax method or what is returning from php file with alert. strAjax seems correct but alert(data) show my php code like this;

php returns this

I change login file as php file instead html. But the problem is not about it. All my ajax codes get data from php something like that. In my computer php files run normally. If you need more information I can edit my post. Why this ajax conk?

Actually it is not. Starts with 127.0.0.1:8020 instead of localhost — kimdirbilmem, Feb 15 '16 at 07:13
when I changed its as localhost it is fixed. OMG you re awesome! Thank you — kimdirbilmem, Feb 15 '16 at 07:21

score 2 · Answer 1 · answered Feb 15 '16 at 07:02

var formData = {
    'username'              : $('input[name=username]').val(),
    'password'             : $('input[name=password]').val(),
    'lg_remember'    : $('input[name=lg_remember]').val()
};

// process the form
$.ajax({
    type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
    url         : 'process.php', // the url where we want to POST
    data        : formData, // our data object
    dataType    : 'json', // what type of data do we expect back from the server
                encode          : true
})

Try this one instead

I've changed as you said. When I do all of thing, it does not submit, and when I just use formData I get same result — kimdirbilmem, Feb 15 '16 at 07:12

score 1 · Answer 2 · answered Feb 15 '16 at 06:47

1

Problem is your ajax code. You are using POST method and passing parameter as query string. You just need to use serialize() for passing data.

Just change your ajax code with this :

$.ajax({
                type: 'POST',
                url: 'loginAjax.php',
                data: $('#login-form').serialize(),
                cache: false,
                success: function(data) {
                    alert(data);
                    if(data == "1") {
                        window.location.href = "home.php";
                    }
                    else {
                        //Error messages
                    }
                }
            });

And just remove strAjax variable, it's not required.

Side note : Please dont use mysql_*. It is deprecated and removed from PHP 7. Use mysqli_* or PDO

answered Feb 15 '16 at 06:47

Mr. Engineer

3,522
4
17
34

Please put `exit` at the end of your PHP file. – Mr. Engineer Feb 15 '16 at 07:04
It looks like there is something wrong with your configuration. – Mr. Engineer Feb 15 '16 at 07:14
What can I do to solve this problem. Can you say anything that I can try? – kimdirbilmem Feb 15 '16 at 07:16
Refer this : http://stackoverflow.com/questions/5121495/php-code-is-not-being-executed-i-can-see-it-on-source-code-of-page and see the accepted answer. – Mr. Engineer Feb 15 '16 at 07:20

score 1 · Answer 3 · answered Feb 15 '16 at 06:52

1

try to use data: $("#login-form").serialize() on your ajax function

answered Feb 15 '16 at 06:52

Matt Magallo

328
1
20

score 1 · Answer 4 · answered Feb 15 '16 at 07:18

1

Add this to your loginAjax.php on the second line

 header('Content-Type: application/json');

note: your url should be:

url         : 'loginAjax.php',

answered Feb 15 '16 at 07:18

madalinivascu

32,064
4
39
55

score 0 · Accepted Answer · answered Feb 15 '16 at 07:25

0

I have figured out. Previously I try to connect with http://127.0.0.1:8020/. When I changed this as localhost all problem has gone. Thank you all I appreciate all your efford.

answered Feb 15 '16 at 07:25

kimdirbilmem

61
1
7

score 0 · Answer 6 · answered Feb 15 '16 at 07:35

<html>
<head>
    <title></title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#login-form').on("submit", function(){
       $.ajax({
            type: 'POST',
            url: 'loginAjax.php',
            data: $("#login-form").serialize(),
            success: function(data) {
                alert(data);
                // if(data == "1") {
                //     window.location.href = "home.php";
                // }
                // else {
                //     //Error messages
                // }
            }
        });
       return false;
    });
});
</script>
<form id="login-form" class="text-left" method="post">
                <div class="main-login-form">
                    <div class="login-group">
                        <div class="form-group">
                            <label for="lg_username" class="sr-only">Username</label>
                            <input type="text" class="form-control" id="lg_username" name="username" placeholder="username"
                                   data-container="body" data-toggle="popover" data-placement="left" data-content=""
                                   value="">
                        </div>
                        <div class="form-group">
                            <label for="lg_password" class="sr-only">Password</label>
                            <input type="password" class="form-control" id="lg_password" name="password" placeholder="password"
                                   data-container="body" data-toggle="popover" data-placement="left" data-content="">
                        </div>
                        <div class="form-group login-group-checkbox">
                            <input type="checkbox" id="lg_remember" name="lg_remember">
                            <label for="lg_remember">remember</label>
                        </div>
                    </div>
                    <button type="submit" class="login-button">Submit</button>
                </div>
            </form>
</body>
</html>

try the whole page i just print_r() the result in php since you are using $() of jQuery i presume that you include the jQuery lib already, cheers bro. try to use the code in a sample page.

I thank you. I figured out what is the problem. When I changed from 127.0.0.1:8020 to localhost, then fixed the problem — kimdirbilmem, Feb 15 '16 at 07:37

PHP Code Returns Its Script and Doesn't Work in JQuery Ajax

6 Answers6