Get json data in ajax from PHP object

Question

I have the javascript shown using ajax code. I used WordPress code to ajax URL and data all things it works when I don't use PHP class(when the input name is empty). But when I use PHP class it returns me the error shown below. I want to know how to call JSON data from the php object using ajax code.

Uncaught TypeError: Cannot read property 'bsnNameEmpty' of undefined.

Update ajax code edit only

jQuery(document).ready(function($) {
$('#contactForm img').hide();
function isEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
}
$('#contactForm').submit(function(event) {
    var bsnname    = $('#bsnname').val();
    var bsnsubject = $('#bsnsubject').val();
    var bsnemail   = $('#bsnemail').val();
    var bsnmessage = $('#bsnmessage').val();
    if ( !bsnname || (bsnname.length < 5) || !bsnsubject || (bsnsubject.length < 1) || !bsnemail || !isEmail(bsnemail) || !bsnmessage || (bsnmessage.length < 5) ) {
        $.ajax({
            url: ajax_object.ajaxurl,
            type: 'POST',
            data: {action: 'bsn_ajax'},
            dataType: 'json',
            cache: false
        })
        .fail(function(data) {
            if(data.bsnErrors.bsnNameEmpty) {
                $('#name-field').html('<em class="text-danger">' + data.bsnErrors.bsnNameEmpty + '</em>');
            }
            if(data.bsnErrors.bsnNameLength) {
                $('#name-field').html('<em class="text-danger">' + data.bsnErrors.bsnNameLength + '</em>');
            }
            if(data.bsnErrors.bsnSubjectEmpty) {
                $('#subject-field').html('<em class="text-danger">' + data.bsnErrors.bsnSubjectEmpty + '</em>');
            }
            if(data.bsnErrors.bsnSubjectLength) {
                $('#subject-field').html('<em class="text-danger">' + data.bsnErrors.bsnSubjectLength + '</em>');
            }
            if(data.bsnErrors.bsnEmailEmpty) {
                $('#email-field').html('<em class="text-danger">' + data.bsnErrors.bsnEmailEmpty + '</em>');
            }
            if(data.bsnErrors.bsnEmailFormat) {
                $('#email-field').html('<em class="text-danger">' + data.bsnErrors.bsnEmailFormat + '</em>');
            }
            if(data.bsnErrors.bsnMessageEmpty) {
                $('#message-field').html('<em class="text-danger">' + data.bsnErrors.bsnMessageEmpty + '</em>');
            }
            if(data.bsnErrors.bsnMessageLength) {
                $('#message-field').html('<em class="text-danger">' + data.bsnErrors.bsnMessageLength + '</em>');
            }
        });
    }
    if (bsnname && (bsnname.length > 4) && bsnsubject && (bsnsubject.length > 1) && bsnemail && isEmail(bsnemail) && bsnmessage && (bsnmessage.length > 4) ) {
        $.ajax({
            url: ajax_object.ajaxurl,
            type: 'POST',
            data: {action: 'bsn_ajax'},
            dataType: 'json',
            cache: false,
            beforeSend: function() {
                $('#name-field em').fadeOut(1);
                $('#subject-field em').fadeOut(1);
                $('#email-field em').fadeOut(1);
                $('#message-field em').fadeOut(1);
                $('#contactForm img').show();
                $('button').text('Sending...');
            }
        })
        .done(function(data) {
            $('#success-msg').html('<p class="bg-success">'+ data.bsnMessageSent +'</p>');
        })
        .always(function(data) {
            document.getElementById("contactForm").reset();
            $('#contactForm img').hide();
            $('#success-msg p').fadeOut(5000);
            $('button').text('Send message');
        });
    }
    event.preventDefault();
});
});

and i have below php object that i retrived json data from it to ajax response

<?php
class YPE_Bsn_Ajax {

function YPE_bsn_conatctus() {
    $bsnContactErrors  = array();
    $bsnContactSuccess = array();

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {

        if(empty($_POST['bsnname'])) {
            $bsnContactErrors['bsnNameEmpty'] = 'Name is required';
        }

        if(!empty($bsnContactErrors)) {
            $bsnContactSuccess['bsnSuccess'] = false;
            $bsnContactSuccess['bsnErrors']  = $bsnContactErrors;
        } else {
            $bsnContactSuccess['bsnSuccess'] = true;
            $bsnContactSuccess['bsnmessageSent']  = 'Yor email has been sent';
        }
        echo json_encode($bsnContactSuccess);
    }
}
}
$Bsn_ajax = new YPE_Bsn_Ajax();
?>

.fail(function(data) { data = $.parseJSON(data); if (!data.bsnSuccess) { if(data.bsnErrors.bsnNameEmpty) { $('#name-field').html('<em class="text-danger">' + data.bsnErrors.bsnNameEmpty + '</em>'); } } }); — Pardeep Poria
– Pardeep Poria, Commented May 9, 2016 at 16:58

Pardeep Poria · Accepted Answer · 2016-05-09 17:52:03Z

1

Set headers on the server side for json like so

header('Content-Type: application/json');
echo json_encode($bsnContactSuccess);

and then read in javascript

$my_data = $.parseJSON(data);
console.log($my_data.responseText.bsnErrors.bsnNameEmpty);

and in your server side code add else below this if

if(empty($_POST['bsnname'])) {
    $bsnContactErrors['bsnNameEmpty'] = 'Name is required';
} else {
     $bsnContactErrors['bsnNameEmpty'] = 'Name is valid';
}

Hope it helps !

answered May 9, 2016 at 17:52

Pardeep Poria

1,0491 gold badge7 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Get json data in ajax from PHP object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related