Jquery serialized to PHP unserialized data

Jquery serialized to PHP unserialized data

Jquery and PHP are very closely knit stuff. PHP unserialized data is one very tough work for web developers to conquer.

Sharing from my own knowledge, I was having a lot of problem when I first used the JQuery serialized data from a form submission. I was not being able to figure out, how I can use this data on the server side for further work.

So, I decided to write it down for all of you guys. I guess several webmasters already know this technique. This tutorial is targeted directly to those who are new to PHP coding and handling Jquery serialized data and PHP unserialized data for their projects.

Where is this JQuery serialization used and why PHP unserialized data

Jquery serialization is very common. JavaScript handled forms are frequently used nowadays to bypass the primitive form handling technique. Previously, forms had a submit action page that got directly called whenever the submit or call-to button was pressed by the user.

Then came form validation. Now, form validation was again done on the server side in the early days. However, latest technology and internet growth demands all websites to be fast and insta-repsonsive. Even Google has become very specific about that while writing their SEO algorithms.

So, the point is, we need speed. For speed, we must complete as many possible validations in the front-end itself.

All types of data validation, entry validation and even data clash checks are being done in the front-end itself nowadays. With AJAX and JQuery, you can now check whether a user is already registered to a website or not.

Other front-end powers include identifying already existing user and showing his details to him or her while they fill up their forgot password form (Google, Facebook, everyone does this nowadays).

So, the point is, the call-to button or submit button must not instantly submit the form when clicked. This is where JavaScript comes in. JavaScript holds the succeeding steps of button click and completes whatever the user wants to happen (validations and checks).

Once the validations are satisfactory, JavaScript continues with the form submission and send data to the back end.

In our case, we will be using Jquery instead of plain JavaScript. We will serialize the data using JQuery and send it to the backend.

So what is serialization?

Before moving to PHP unserialized data preparation, we must know more about the serialization process in JQuery. JQuery has this feature wherein, you can concatenate all your field data from a form and send it like a long string to the destination file. The data looks like a huge array of alphanumeric characters with an “ampersand” as the delimiter for each field.

jquery-serialized-to-php-unserialized-data-conversion-1

The field names are the names that the developer has provided during coding of the form in the “name” attribute. This name is followed by an “equals to” sign and then the value that has been provided by the user. This becomes one set of data. Then comes the “ampersand” and again another set.

Like this, the fields and their corresponding data travels to the action page in the form of a long string. On the other side, at the backend, PHP takes in the string, performs the unserialization and the PHP unserilaized data is retrieved in the form of an array.

So before we move to PHP unserilaized data creation, our Jquery code to create the form field serialized data, would be the following –

$('#form').submit(function(e){
        e.preventDefault();				// prevents the default HTML form submission
        
	if(true){					// put your required validation conditions here        
            var value = $('#form').serialize();            
            $.post(
              "submit.php",				// this is the target PHP file
              {value:value}				// contains the serialized data              
            );
        }
        else{
            alert('Please enter the fields correctly');
        }
    });

PHP unserialized data preparation

We are using PHP as the backend code language here. So, naturally, our process will be PHP unserialized data.

At the backend, the developer might choose to do another set of validation, store the data, update the data, etc. That part we would ignore in this article.

Step by step, we would proceed in the following manner –

  • First part of the unserialization is capturing the data. The data must be captured directly by unserialization and into an array type variable.
  • A PHP inbuilt function is already provided to deserialize JavaScript serialized form data.
  • The data is now in the form of PHP unserialized data and is contained in an array.
  • To access each field data, we would directly access the array element with the field name. The array “key -> value” format used in PHP comes into play here. The “key” here is the field name and the “value” is the field data.
    $value=  array();                          // since we declared both the variable names as "value" in JQuery
    parse_str($_POST['value'], $value);        // PHP inbuilt method to parse serialized data into array.
    
    $username = $value['username'];            // Form field names directly mapped as array "keys"
    $name = $value['name'];
    $address = $value['address'];
    $email = $value['email'];
    

Let us look into the above snippet for better understanding. This snippet would help you understand it very systematically. If you still face some problems getting it, do write to me in the comments section below.

Comments are closed.