CODEWITHSUNDEEP
javascriptphpjqueryjsonajax
MaDaHoPe
MaDaHoPe

Reputation: 133

Extract Json response

I am trying to to extract a Json response in jquery sent from a php file. This is the .js code:

    $.ajax({
 url: 'index.php?page=register', //This is the current doc
 type: 'POST',
 datatype: 'json',
 data: {'userCheck': username},
 success: function(data){
    // Check if username is available or not
 },
 error: function(){
    alert('Much wrong, such sad');
 }
});

This is the response from the php file:

    if($sth->fetchColumn()!=0){
        //$response = array("taken");
        $response = array("username"=>"taken");
        echo json_encode($response);
        //echo '{"username':'taken"}';
    }else{
        //$response = array("available");
        $response = array("username"=>"available");
        echo json_encode($response);
        //echo '{"username":"available"}';
    }

I have tried all combinations I can think of in both files, but nothing seems to work. It is a simple check for a username in the database. If I console log the data I get from the response, I get this:

    {"username":"available"}<!DOCTYPE html>
    // The rest of the page html

So the info is there, but how do I access it? I have tried several syntaxes found around the internet, but no luck so far. I seem to recall that a json response only can contain valid json, so is the problem the html? I don't think I can avoid this due to the structure of my application, so hopefully it is possible to access the json with my present structure.

Upvotes: 5

Views: 366

Answers (3)

Nimantha Harshana Perera
Nimantha Harshana Perera

Reputation: 919

Also you can set request headers in your jQuery ajax call beforeSend function like follows

beforeSend: function (xhr) {
                xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
                xhr.setRequestHeader('Accept', 'application/json');
}

So you're strictly declaring the data type to be json

Upvotes: 0

Barmar
Barmar

Reputation: 782785

When you're responding to an AJAX call, you should just return the JSON response, not the HTML of the page. Add:

exit();

after this code so you don't display the HTML after the JSON.

In the JS code, use if (data.username == 'available') to tell whether the username is available.

The other problem in your code is that you have a typo here:

datatype: 'json',

It should be dataType, with an uppercase T.

You can also put:

header("Content-type: application/json");

before echoing the JSON in the script, and jQuery will automatically parse the response.

Upvotes: 2

MTroy
MTroy

Reputation: 895

in you Ajax

EDIT:

change 

datatype:"json",

the case of parameter name was not respected, the t must be T

dataType:"json",

now retry please

$.ajax
({
    url: 'index.php?page=register', //This is the current doc
    type: 'POST',
    dataType: 'json',
    data: {'userCheck': username},
    success: function(data)
    {
        // Check if username is available or not
        switch(data.username)
        {
            case "available":
                // do you want
                break;
            case "taken":
                // do you want
                break;
        }
    },
    error: function()
    {
        alert('Much wrong, such sad');
    }
});

in PHP

simply that, and don't forget to exit; to avoid include html page in your json response ! This is the code coming after the }".... who break your json output and make it unreadable by javascript (worste, it simply break your javascript !)

echo json_encode(["username"=> ($sth->fetchColumn()!=0) ? "taken":"available"]);
exit;

Upvotes: 2

Related Questions