Senne Vandenputte Senne Vandenputte - 1 month ago 5
Ajax Question

Ajax misteriously stopped working on my entire website

I have a strangest problem with my website. After 2 full days of trying to sort it out, I still haven't managed to find what's wrong.

I recently noticed (I think it started after changing servers) that my

ajax
code is not working properly anymore. Before it was working like a charm. Here's an example of a login script from my online community:

Follows the form:

<form class="registration-form" name="signupform" onsubmit="return false;">
<input type="text" onfocus="emptyElement('status')" placeholder="Email" id="email" autofocus>
<input type="password" onfocus="emptyElement('status')" placeholder="Password" id="password">
<button type="submit" id="loginbtn" onclick="login()" >Log in!</button>
<div id="status"></div>
</form>


Follows the JS:

function emptyElement(x){
_(x).innerHTML = "";
}
function login(){
var e = _("email").value;
var p = _("password").value;
if(e == "" || p == ""){
_("status").innerHTML = 'Please fill out all the form data.';
} else {
_("loginbtn").style.display = "none";
_("status").innerHTML = 'Loading...';
var ajax = ajaxObj("POST", "login.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
if(ajax.responseText == "login_failed"){
_("status").innerHTML = 'Login unscuccessful';
_("loginbtn").style.display = "block";
} else {
window.location = "xxxx";
}
}
}
ajax.send("e="+e+"&p="+p);
}
}


Follows the PHP:

if(isset($_POST["e"])){
include_once("php_includes/db_conx.php");
$e = mysqli_real_escape_string($db_conx, $_POST['e']);
$e = strtolower($e);
$p = md5($_POST['p']);
$ip = preg_replace('#[^0-9.]#', '', getenv('REMOTE_ADDR'));
if($e == "" || $p == ""){
echo "login_failed";
exit();
} else {
$query = mysqli_query($db_conx,"SELECT id, username, password FROM users WHERE email='$e' AND activated='1' LIMIT 1");
$row = mysqli_fetch_row($query);
$db_id = $row[0];
$db_username = $row[1];
$db_pass_str = $row[2];
if($p != $db_pass_str){
echo "login_failed";
exit();
} else {
//set cookies and log user in
}
}
exit();
}


Although the
php
of the form is working and when all values are correct the user is logged in, the
ajax
is not showing any status or loading message like it should with the code above.

Nothing else changed with the scripts. I still include
ajax.js
and
jquery
at the top of the page like before.

This is just one example. The form I use to let people register is the same as this one and has the same problem, just like any other
ajax
form on my website.

What could the problem be?

Answer

better use json when getting data from server to javascript (AJAX)

if(isset($_POST["e"])){
    include_once("php_includes/db_conx.php");
    $e = mysqli_real_escape_string($db_conx, $_POST['e']);
    $e = strtolower($e);
    $p = md5($_POST['p']);
    $ip = preg_replace('#[^0-9.]#', '', getenv('REMOTE_ADDR'));

    $json['success'] = true;

    if($e == "" || $p == ""){
        $json['success'] = false;
    } else {
        $query = mysqli_query($db_conx,"SELECT id, username, password FROM users WHERE email='$e' AND activated='1' LIMIT 1");
        $row = mysqli_fetch_row($query);
        $db_id = $row[0];
        $db_username = $row[1];
        $db_pass_str = $row[2];
        if($p != $db_pass_str){
            $json['success'] = false;
        } else {
            //set cookies and log user in
        }
    }
    // display your return data as json
    echo json_encode($json);
}

wrap the inside of your onreadystatechange function to

if (this.readyState == 4 && this.status == 200) {

}

remove your condition which is

if(ajaxReturn(ajax) == true) {
}

your js file is now like this

function emptyElement(x){
    _(x).innerHTML = "";
}
function login(){
    var e = _("email").value;
    var p = _("password").value;
    if(e == "" || p == ""){
        _("status").innerHTML = 'Please fill out all the form data.';
    } else {
        _("loginbtn").style.display = "none";
        _("status").innerHTML = 'Loading...';
        var ajax = ajaxObj("POST", "login.php");
        ajax.onreadystatechange = function() {
            // when ajax is now okay and request finished and response is ready
            if (this.readyState == 4 && this.status == 200) {
                var result = JSON.parse(this.responseText);

                // debugging purpose display response
                console.log(result);

                if(result.success == true){
                    _("status").innerHTML = 'Login unscuccessful';
                    _("loginbtn").style.display = "block";
                } else {
                    window.location = "xxxx";
                }
            }
        }
        ajax.send("e="+e+"&p="+p);
    }
}
Comments