Ajax Element return full html code

Question

I couldnt figure out whats wrong with my code but if I am calling ajax with the following code:

ajax.js:

function ajaxObj(meth, url){
var x = new XMLHttpRequest();
x.open(meth, url, true);
x.setRequestHeader("Content-type", "application/x-www_form-urlencoded");
return x;
}

function ajaxReturn(x){
    if(x.readyState == 4 && x.status == 200){
    return true;
    }
}

signup.php

function checkusername(){
            var u = _("username").value;
            if( u != ""){
                _("usernamestatus").innerHTML = "checking...";
                var ajax = ajaxObj("POST", "signup.php");
                ajax.onreadystatechange = function(){
                    if(ajaxReturn(ajax) == true){
                        _("usernamestatus").innerHTML = ajax.responseText;
                    }
                }
                ajax.send("usernamecheck="+u);
            }
        }

The PHP code I am calling is the following in signup.php:

<?php
    //ajax calls usernamecheck
    if(isset($_POST["usernamecheck"])){
        include_once("php_includes/db_conx.php");
        $username = preg_replace('#[^a-z0-9]#i', '', $_POST['usernamecheck']);
        $sql = "SELECT id FROM users WHERE username = '$username' LIMIT 1";
        $query = mysqli_query($db_conx, $sql);
        $uname_check = mysqli_num_rows($query);
        if(strlen($username) < 3 || strlen($username) > 16) {
            echo '<strong style = "color:#F00;">3 - 16 characters please</strong>';
            exit();
        }
        if(is_numeric($username[0])){
            echo '<strong style = "color:#F00;">Username must begin with a letter!</strong>';
            exit();
        }
        if($uname_check < 1){
            echo '<strong style = "color:#09900;">' . $username . ' is OK</strong>';
            exit();
        } else {
            echo '<strong style = "color:#F00;">' . $username . ' is taken</strong>';
            exit();
        }
    }
?>

As you can see, it is just a check for the username in SignUp form.

The function _(x) is getting the Element by ID.

I get the full HTML code as response and not the echo.

If I use the following:

<?php
//ajax calls usernamecheck
if(isset($_POST["usernamecheck"])){
    echo 'test';
}

then it returns test + full html.

What I am doing wrong?

You're not doing anything wrong. If the page you called has HTML in it everything will be returned, that is how AJAX works. Try isolating the PHP you want to call in a separate file with no HTML markup. — Jay Blanchard
– Jay Blanchard, Commented Feb 15, 2016 at 18:49
Side note x-www_form-urlencoded is not a proper content type, it should be x-www-form-urlencoded — Ohgodwhy
– Ohgodwhy, Commented Feb 15, 2016 at 18:52
Putting the PHP into separate file and then calling only that file is the solution. — Croolman
– Croolman, Commented Feb 15, 2016 at 19:33

Sergey Vidusov · Accepted Answer · 2016-02-16 03:10:27Z

1

You should use exit() only once, at the end of your AJAX backend call, so that the script would terminate and nothing else would be sent to the browser. E.g.,

<?php
if(isset($_POST["usernamecheck"])){
    echo 'test'; // or whatever complex logic should be here
    exit();
}

would do the trick.

answered Feb 16, 2016 at 3:10

Sergey Vidusov

1,3421 gold badge7 silver badges10 bronze badges

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

Comments

Dropye · Accepted Answer · 2016-02-22 16:22:54Z

0

OhGodwhy had the right answer. It was exactly the typo in "x-www_form-urlencoded" which should be "x-www-form-urlencoded".

answered Feb 22, 2016 at 16:22

Dropye

2244 silver badges18 bronze badges

Collectives™ on Stack Overflow

Ajax Element return full html code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related