javascript - Data is not defined - Stack Overflow

admin管理员组

文章数量:1426491

Console states the following errors when I hit the submit button on my page:

process.js:19 Uncaught ReferenceError: data is not defined
at HTMLButtonElement.<anonymous> (process.js:19)
at HTMLButtonElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLButtonElement.y.handle (jquery-3.3.1.min.js:2)

This is my jQuery AJAX code that executes when you hit the submit button. This is my first time playing with AJAX/jQuery - not sure what is happening so if someone could help me, that'd be greatly appreciated!

$(document).ready(function() {
$('#login_button').click(function()
{
    event.preventDefault();
    var formData = {
        'email'         : $('input[email=email').val(),
        'password'      : $('input[password=password').val()
    };

    $.ajax({
        type        : 'POST',
        url         : 'ajax/proclogin.php',
        data        : formData,
        dataType    : 'json'
    });

    // using the done promise callback

        if (data.success == false)
        {
            if(data.errors.email)
            {
                //toastr.error(''+data.errors.email+'', 'Oops!');
                alert('Email error');
            }
            else if(data.errors.password)
            {
                //toastr.error(''+data.errors.password+'', 'Oops!');
                alert('Password Error');
            }
        }
        else
        {
            //toastr.success('Works!', 'WooHoo!');
            alert('Works.');
        }
});
});

Console states the following errors when I hit the submit button on my page:

process.js:19 Uncaught ReferenceError: data is not defined
at HTMLButtonElement.<anonymous> (process.js:19)
at HTMLButtonElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLButtonElement.y.handle (jquery-3.3.1.min.js:2)

This is my jQuery AJAX code that executes when you hit the submit button. This is my first time playing with AJAX/jQuery - not sure what is happening so if someone could help me, that'd be greatly appreciated!

$(document).ready(function() {
$('#login_button').click(function()
{
    event.preventDefault();
    var formData = {
        'email'         : $('input[email=email').val(),
        'password'      : $('input[password=password').val()
    };

    $.ajax({
        type        : 'POST',
        url         : 'ajax/proclogin.php',
        data        : formData,
        dataType    : 'json'
    });

    // using the done promise callback

        if (data.success == false)
        {
            if(data.errors.email)
            {
                //toastr.error(''+data.errors.email+'', 'Oops!');
                alert('Email error');
            }
            else if(data.errors.password)
            {
                //toastr.error(''+data.errors.password+'', 'Oops!');
                alert('Password Error');
            }
        }
        else
        {
            //toastr.success('Works!', 'WooHoo!');
            alert('Works.');
        }
});
});

• javascript
• jquery
• ajax

Share Improve this question Follow asked Jun 13, 2018 at 8:59 JitrenkaJitrenka 30511 gold badge22 silver badges1010 bronze badges 3

• 4 The data object you use in the if conditions is not declared anywhere. You need to either use the success handler function of $.ajax, or use a done() or then() callback – Rory McCrossan Commented Jun 13, 2018 at 9:00
• 1 And for your next problem, don't forget to close the brackets in the selectors where you get the values (neither have a closing ] so you'll get null for each value). – Reinstate Monica Cellio Commented Jun 13, 2018 at 9:04
• Thank you for answering. I have updated the closed bracket but unfortunately it still seems to display "email is required" no matter what(email filled in, password field blank should prompt "password is required"). – Jitrenka Commented Jun 13, 2018 at 9:52

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

data object that you are using is not defined. As suggested by 'Rory McCrossan', use the ajax in below mentioned way. For detailed info, go to this link - http://api.jquery./jquery.ajax/

Example:

 $(document).ready(function() {
    $('#login_button').click(function()
    {
        event.preventDefault();
        var formData = {
            'email'         : $('input[email=email]').val(),
            'password'      : $('input[password=password]').val()
        };

        $.ajax({
            type        : 'POST',
            url         : 'ajax/proclogin.php',
            data        : formData,
            dataType    : 'json',
            success     : function(data){
                         if (data.success == false)
                           {
                              if(data.errors.email)
                              {
                               //toastr.error(''+data.errors.email+'', 'Oops!');
                                alert('Email error');
                              }
                    else if(data.errors.password)
                    {
                        //toastr.error(''+data.errors.password+'', 'Oops!');
                        alert('Password Error');
                    }
                }
                else
                {
                    //toastr.success('Works!', 'WooHoo!');
                    alert('Works.');
                }
               });
        }
     });                   
 });

The response or data is available in the success callback of $.ajax call.

 $.ajax({
        type        : 'POST',
        url         : 'ajax/proclogin.php',
        data        : formData,
        dataType    : 'json'
    }).done(resp => {
       // You IF statements go here.
    }).fail(error => {

    });

Look at the docs at: jQuery

Model ajax function looks like this

$.ajax({
    url : 'wopiEditor',
    data : {
        data : data,
        reqType : "initEditFile",
        access_token : "DEADBEEFDEADBEEFDEADBEEF"
    },
    type : 'POST',
    dataType : 'text',
    success : function(response) {

    },
    error : function(request, textStatus, errorThrown) {
        console.log(request, textStatus, errorThrown);
    }
});

In your code, the data is defined anywhere. So it is giving error.

Add success handler like this...

 $.ajax({
        type        : 'POST',
        url         : 'ajax/proclogin.php',
        data        : formData,
        dataType    : 'json',
        success: function (response) {
           console.log(response);
        }
    });

concerning your issue now with validation of email and password

'email'         : $('input[email=email]').val(),
'password'      : $('input[password=password]').val()

this -> input[email=email] is targeting an input element with an "email" attribute which isnt a valid input attribute, your looking for name/type ect.

'email'         : $('input[name=email]').val(),
'password'      : $('input[name=password]').val()

so you are targeting all input elements that have the name attribute of email or password. then make sure you have name=email on your input element

<input type="email" name="email">
<input type="text" name="password">

hopefully this solution helps you

本文标签： javascriptData is not definedStack Overflow