Ajax parameters passed return undefined - php

Question

I am posting an Ajax call to a PHP function but all the data passed is "UNDEFINED". When I debugged the JQuery, the value seems work. The undefined is at server side. PHP side.
$('.js-checkout-shipping-submit').on('click', function(e) {
$.ajax({
// Change the URL to the right one
url: 'index.php?route=checkout/checkout/updateShippingAddress',
type: 'post',
dataType: 'json',
data: 'firstName:' + $(' .js-checkout-firstName').val() +
',lastName:' + $('.js-checkout-lastName').val() +
',address:' + $('.js-checkout-address').val() +
',zipcode:' + $('.js-checkout-zipcode').val() ,
success: function(data) {
if(data['status'] === "pass"){
console.log("success");
}
if(data['status'] === "fail") {
console.log("fail");
}
},
error: function(data) {
}
});
e.preventDefault();
});
public function updateShippingAddress(){
$firstName=$this->request->post['firstName'];
$lastName=$this->request->post['lastName'];
$address=$this->request->post['address'];
$zipCode=$this->request->post['zipcode'];
}

Answer 1

You are posting the JSON object as string, please try this
data: { // making the data to become object
firstName : $('.js-checkout-firstName').val(),
lastName : $('.js-checkout-lastName').val(),
address : $('.js-checkout-address').val(),
zipcode : $('.js-checkout-zipcode').val()
},
success: function(data) {
...
If you are getting undefined as value of post params, maybe there is jQuery selector problem.
Try to log $('.js-checkout-firstName').val() and see what you get and make shre an Input is present with class .js-checkout-firstName

Answer 2

You have to pass your request parameter in json format for ajax.
so your data parameter value is be like,
data: {'firstName' : $('.js-checkout-firstName').val(),'lastName' : $('.js-checkout-lastName').val(),'address' : $('.js-checkout-address').val(),'zipcode' : $('.js-checkout-zipcode').val()},
success: function(data) {