Cant receive Json response from Api using Jquery

Question

I am a beginner in Javasript.Now I trying to make a http request to my php server,which will return a Json response like this:

{
  "error": false,
  "user_id": 1,
  "user": {
    "username": "abc",
    "email": "[email protected]",
    "http://192.168.1.1/abc/v1/profilepic/defaultmale.jpg"
  }
}

I make the Ajax call like the following,but I didn't get any response from my browser,and as I see is didn't do anything.

What I tried so far

   <script type="text/javascript">

    $(document).ready(function () {
        $("#loginBtn").click(function () {

            var vEmail = $("#email").val();
            var vPassword = $("#password").val();

            if(vEmail ==='' &&vPassword === ''){
                alert("please enter email and password");
            }else if(vEmail !== '' && vPassword===''){
                alert("password required");
            }else if(vEmail ==='' && vPassword !== ''){
                alert("email required");
            }else{

                $.post("http://localhost/abc/v1/login",
                    {email:vEmail, password:vPassword},
                    function(response){ // Required Callback Function
                        //"response" receives - whatever written in echo of above PHP script.
                        alert(response);
                    }
                );


            }

        });
    });
</script>

I cant get alert in my browser,I tried console.log(response) as well,I also cant see in my inspect element in Google Chrome.

I tried like below as well,also no luck

var obj = $.parseJson(response);
alert(obj['user_id']);

What I need to know

1) Is this the correct way to make the Http request via Jquery?If not,what is the correct way?

2) How can I test whether I successfully get the response?can it be print out anyway for testing purpose?

3) How can I parse the Json correctly using Jquery?

Thanks for advance.

UPDATE I adding the fail function as well,but when I filled in email and password,it still nothing happen(means the browser just refresh,no alert,console log just blank).

$.post("http://localhost/abc/v1/login",
                {email:vEmail, password:vPassword},
                function(response,status){ // Required Callback Function
                    //"response" receives - whatever written in echo of above PHP script.
                    alert(JSON.stringify(response));

                },fail(function () {
                    alert("failed");
                })
            );

Can somebody show me the correct way to do it?

UPDATE

After following @Mendax answer,I get the response in console.log with this response.What is this means?

Error

Object {readyState: 0, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}

F12 development mode, check console errors. I think there is a cross-domain issue. — DongHyun Song
– DongHyun Song, Commented May 1, 2017 at 5:25
yes i think you got error and you have not written fail function. please check with fail function — Lalji Dhameliya
– Lalji Dhameliya, Commented May 1, 2017 at 5:29

Rohith K P · Accepted Answer · 2017-05-01 06:16:34Z

1

Try sending data as JSON string. Also add a fail callback to catch erros

    $.post("http://localhost/abc/v1/login",
        JSON.stringify({email:vEmail, password:vPassword}),
        function(response){ // Required Callback Function
            //"response" receives - whatever written in echo of above PHP script.
            console.log(response);
        }, "json").fail(function(error) { console.log(error) });;

To test if you get the response you can visit newtwork tab in your console or adding fail callback will help.
to parse a JSON you can use JSON.parse().

edited May 1, 2017 at 6:16

answered May 1, 2017 at 5:53

Rohith K P

3,5831 gold badge24 silver badges28 bronze badges

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

12 Comments

ken Over a year ago

Sir,your code have response,but the alert is undefined.What is the cause ya??

ken Over a year ago

nice,at least I get some response with this.I update my question,cause I dont know what it means for the response

Rohith K P Over a year ago

@ken I saw your update, But you are not passing error to alert.. try printing tha fail function parameter to get an insight about the issue

Rohith K P Over a year ago

@ken also you didn't try stringifying the data you sent, like in my answer

ken Over a year ago

Ok..what I make a change now

|

score 0 · Accepted Answer · 2017-05-01 05:52:05Z

0

Please try this method to send request and Get response in jquery. Here form is Form method where your input controls live and email/passwords are the text box id. Also make sure the Url you are using is response when passing parameters.

 $.post( "http://localhost/abc/v1/login", {email:form.email.value, 
  password:form.password.value })
 .done(function( data ) {
   alert(JSON.stringify(data));
 });

edited May 1, 2017 at 5:52

answered May 1, 2017 at 5:42

user5093161

1 Comment

ken Over a year ago

sir I test in postman,my api is working,but I use ur code,and submit it,it still no response in browser

Rohan Kumar · Accepted Answer · 2017-05-01 05:56:24Z

0

Pass json parameter in $.post if it your response is in JSON format like,

$.post("http://localhost/abc/v1/login",{email:vEmail, password:vPassword}, function(response){ // Required Callback Function
    //"response" receives - whatever written in echo of above PHP script.
    alert(response);
},'json');// pass json parameter here

Also, check in your browser's console and make sure that your AJAX request is made correctly, and there is no errors from server side.

answered May 1, 2017 at 5:56

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Comments

Sagar Arora · Accepted Answer · 2017-05-01 05:57:17Z

0

Pass data type in the $.post method like:

               $.post("http://localhost/abc/v1/login",
                    {email:vEmail, password:vPassword},
                    function(response){ // Required Callback Function
                        //"response" receives - whatever written in echo of above PHP script.
                        alert(response);
                    },'json'// Data type to output json format
                );

This will work

answered May 1, 2017 at 5:57

Sagar Arora

1,7831 gold badge11 silver badges20 bronze badges

Collectives™ on Stack Overflow

Cant receive Json response from Api using Jquery

4 Answers 4

12 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

12 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related