How to check if data is passed in ajax

Question

I have the below requirement to get the registration form to post the data. But I am unable to test it, could anyone please help. I want to see whether the data is being passed or not? I have both jquery cdn and jquery-validate in place.

I have the plunker

jQuery:

// Code goes here

$(function() {

    /* Registration form for the website */
    /* validation */
    $("#register-form").validate({
        rules: {
            firstName: {
                required: true
            },
            lastName: {
                required: true
            },
            userName: {
                required: true,
                minlength: 4
            },
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 8,
                maxlength: 15
            },
            cpassword: {
                required: true,
                equalTo: '#password'
            },
        },
        messages: {
            userName: "please enter a valid user name",
            password: {
                required: "please provide a password",
                minlength: "password at least have 8 characters"
            },
            email: "please enter a valid email address",
            cpassword: {
                required: "please retype your password",
                equalTo: "password doesn't match !"
            }
        },
        submitHandler: submitForm
    });
    /* validation */

    /* form submit */
    function submitForm() {
        var data = $("#register-form").serialize();
        // var data={
        //  firstName: $('#firstName').val(),
        // }

        $.ajax({

            url: 'http://localhost:8000?userName=&password=&firstName=&lastName=&email=',
            type: 'POST',
            data: data,

            beforeSend: function() {
                $("#error").fadeOut();
                $("#btn-submit").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; sending ...');
            },

            success: function(data) {
                if (data === 0) {

                    $("#error").fadeIn(1000, function() {


                        $("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; Sorry email already taken !</div>');

                        $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account');

                    });

                } else if (data == 1) {

                    $("#btn-submit").html('<img src="btn-ajax-loader.gif" /> &nbsp; Signing Up ...');

                } else {

                    $("#error").fadeIn(1000, function() {

                        $("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> &nbsp; ' + data + ' !</div>');

                        $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account');

                    });

                }
            }
        });
        return false;
    }
});

Open up your console, go to the network tab, click the request that goes out and inspect what was sent. — tymeJV
– tymeJV, Commented Jan 20, 2017 at 15:20
Use the network tab of the console. It shows all requests the browser makes, along with the data in them and the response they receive — Rory McCrossan
– Rory McCrossan, Commented Jan 20, 2017 at 15:20
In developer tools on any browser, you can also open a Source tab and set breakpoints and step through your code nowadays. This isn't like the savagery of the early web... — Paul
– Paul, Commented Jan 20, 2017 at 15:25

user7174959 · Accepted Answer · 2017-01-20 15:27:29Z

6

If you inspect your browser, go onto the network tab. Select the XHR tab within there. Those are all AJAX calls being made. From here you can see the Status codes, duration, etc.

Note: this is a screenshot of the Chrome browser

answered Jan 20, 2017 at 15:27

user7174959

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

1 Comment

user7174959 Over a year ago

@Bob Glad it helped, If you click on the calls you can expand them and check the headers for further information as well

michaelitoh · Accepted Answer · 2017-01-20 15:25:05Z

0

You can use console.log(data) to see what data variable is.

answered Jan 20, 2017 at 15:25

michaelitoh

2,34016 silver badges26 bronze badges

3 Comments

Harry Pehkonen Over a year ago

I would add JSON.stringify: console.log(JSON.stringify(data, null, 4))

Bob Over a year ago

Thank you all, I have marked the answer and also I see the data which is posted :) I really appreciate all your help. @Leo

aaa Over a year ago

Where should the console.log(data) be placed? Below Data:data?

Collectives™ on Stack Overflow

How to check if data is passed in ajax

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related