Ajax Jquery With Serialize

Posted on  by admin

Contact Us

This simple lesson will show how to use the Jquery serialize() function to pass all form data to an ajax file.

  • Conclusion

With the serialize() function, it is very easy to pass all form data name and values to the ajax file without having to send them all separately. I will go over this in detail. When the user inputs a name in the text input box and clicks ‘Submit it’, the Jquery .submit() method is triggered. We pass in the e into the function and use e.preventDefault() method too because you do not want the usual form submission to happen….which would be a typical post request that would reload the page.

After that, the formData variable is created and it contains the names and values from the form.

Then, it is passes into Ajax for which it is sent to the ajax_1.php file. After it arrives to the ajax_1.php file, the parse_str() function is used to make an array from that serialized data. In that array, is the first name that was entered into the text field. Thus, the value of that posted test becomes $myArray[‘myFirst’].

Remember that myFirst was the name of the input text box. After that, it is pretty much a simple mySQL query that finds all users with that first name. Finally, the names are printed in two separate ‘div’ elements. Note that the printed text in the ajax file is handled as the msg variable in the original file. Thus, there are two places and methods for which the same text is printed; one using vanilla javascript and the other using Jquery.

The code below is represents the ajax_1.php which handles the data made from the original page.

The code is very limited and although it shows how to handle the data, any production server would need a layer of security built around it so unauthenticated users and web robots would be unable to cause damage.
Content Management Systems 100%Joomla and Wordpress CMS 90%HTML/CSS & JavaScript 95%PHP & mySQL 95%.
CategoriesContent Management Systems (1)Content Management Systems (1)Gallery (4)Gallery (4)Laravel (2)MyBlog (740)AngularJS (2)Blogging and Writing (5)CodeIgniter (11)HTML CSS (29)Javascript (13)Joomla 1.5 (47)Joomla 1.6 – Joomla 3.3 (27)Linux (71)MyBlog (34)Our Blog (3)PHP / MYSQL (368)PHP / MYSQL (mysqli) (8)PHP Classes (8)Raspberry Pi (13)SEO (10)Web Developer (6)Web Host Manager (49)Wordpress (36)Our Magazine (12)Our Magazine (12)Uncategorised (2).
Content Management Systems (1)Content Management Systems (1).
Content Management Systems (1).
Gallery (4)Gallery (4).
MyBlog (740)AngularJS (2)Blogging and Writing (5)CodeIgniter (11)HTML CSS (29)Javascript (13)Joomla 1.5 (47)Joomla 1.6 – Joomla 3.3 (27)Linux (71)MyBlog (34)Our Blog (3)PHP / MYSQL (368)PHP / MYSQL (mysqli) (8)PHP Classes (8)Raspberry Pi (13)SEO (10)Web Developer (6)Web Host Manager (49)Wordpress (36).
Blogging and Writing (5).
CodeIgniter (11).
Javascript (13).
Joomla 1.5 (47).
Joomla 1.6 – Joomla 3.3 (27).
PHP / MYSQL (368).
PHP / MYSQL (mysqli) (8).
PHP Classes (8).
Raspberry Pi (13).
Web Developer (6).
Web Host Manager (49).
Our Magazine (12)Our Magazine (12).
Our Magazine (12).
Uncategorised (2).
Affordable web design,custom web development and mobile apps for individuals and businesses.
Small Business Websites.
Custom Web Apps.
Jquery / Angular.js.
Pro Content Writing.
Android & IOS Apps.
SEO Committment.
Fullstack Web Studio.
Vancouver | North Vancouver | Burnaby | Richmond | Coquitlam | Port Coquitlam | Surrey | Langley | Maple Ridge | Mission | Abbotsford | Kamloops | Kelowna | Victoria | Squamish | Whistler | Pemberton.
Modified2 months ago.
Is it possible to send form elements (serialized with .serialize() method) and other parameters with a single AJAX request?

Recommended Articles