SOURCE CODE DOWNLOAD. Click here to download the source code in a zip file – I have released it under the MIT License, so feel free to build on top of it if you want to. Create a database and import 2-comments.sql. Change the database settings to your own in 3-ajax-comments.php. Fire up 1a-comments.html in your web browser. PHP (Pre-Processor Hypertext) is a server-side scripting language, which is considered best for developing the dynamic web pages. At PHPGurukul students can easily download the FREE PHP projects on varied topics according to their requirements. This list of projects in PHP with source code aims to enhance the user’s skills with the dynamic and attractive web application. Expense Management PHP MySQL Source Code refers back to the programs deployed by an enterprise to process, pay, and audit employee-initiated expenses. These prices embody, however, should not be restricted to, expenses incurred for journey and leisure.

• Practical Php And Mysql Website Databases Source Code
• E Commerce Website Php Mysql Source Code
• Dynamic Website Php Mysql Source Code

jQuery AJAX example with php MySQL

It is like an interface for the backend to interact with the MySQL database and make changes without making any change in the PHP code. It also gives you the freedom to work with multiple databases. The major advantage of using PDO is that your code stays simple and portable. This program is built in PHP, MySQL, HTML, Bootstrap & Ajax for smooth and not reloading page. I did not create a CSS file for styling, this program uses default bootstrap styling. You Also May Like. Upload Image In PHP With MySQL Database Web Dev Trick. Build a Simple Quiz In PHP Source Code. More PHP Programs.

jQuery and Ajax are buzzwords now a days in web development community and it is a must have skill for a web developer. In this tutorial we are going to explore jQuery AJAX example with php MySQL and how we can send an AJAX get request using jQuery to fetch data from MySQL database server. Let us explore what is Ajax and why it is so popular with jQuery and see how we can perform an AJAX GET request to get data from server.

Practical Php And Mysql Website Databases Source Code

Why is AJAX and jQuery are important?

AJAX stands for Asynchronous JavaScript and XML. It uses XMLHttpRequest object to communicate with Server. It can send to server and receive data from server in different formats like JSON, XML, HTML or Text asynchronously, that prevents whole page from refreshing.

jQuery is a light weight JavaScript library and has wide range of plugins available for doing different tasks very easily. jQuery hides complexities of plain JavaScript and provides a quick way to perform different tasks. It has several methods that are used to perform AJAX requests.

jQuery AJAX Methods

$.ajax – This method performs an asynchronous request.

$.get – This method performs HTTP AJAX GET request.

$.getJSON – This method get JSON encoded data using AJAX HTTP GET request

$.post – This method load data from server using AJAX HTTP POST request.

Perform a AJAX GET request to get data from server

Using jQuery, AJAX GET request can fetch data from server. The task we are going to do is fetch users from MySQL database using jQuery AJAX.

1. Create a MySQL table and insert data

2. Create HTML form and jQuery script to perform AJAX GET Request to PHP MySQL Server

3. Write a PHP script to receive request from client and fetch data from MySQL database and send a JSON encoded result to client

1. Create MySql database and table using PHPMyAdmin

1. Create a MySQL database : dbusers

2. Create a table in database : users

3. Insert data into the table

HTML and jQuery Code

Now I hope you have already installed PHP, Apache, MySQL on your system using WAMP, XAMPP or MAMP.

1. Create folder for the project name ajaxjquery inside your root directory.

2. Create a file index.php inside ajaxjquery directory.

3. Add HTML code that will display a button.

4. When user will click on a button an AJAX request will be posted to PHP MySQL server.

5. PHP MySQL will return JSON encoded result back to client end.

Create Form and button onClick event code

In HTML code we create a button. Button’s onclick method will perform a GET request and will embed the result to a div.

jQuery $function()

Inside first script tag we called jQuery from jQuery CDN so we can perform an AJAX request. In second script tag we have a code block inside

The code above is a jQuery code snippet that make sure the code inside this block executes after whole page is loaded. The next code snippet

jQuery Ajax Code

In the script above when a user clicks on the button whose id is #getusers . An AJAX request is posted to a PHP page named getrecords.php. PHP page returns a JSON Encoded result. Using jQuery’s method $.parseJSON result is decoded and a loop is performed through data array. Inside loop user information is concatenated inside a table and then all the records are appended to a div using HTML method in jQuery.

PHP code to access records from database

In this last step we have to create a PHP script that will accept a request and send back JSON encoded result. So following are steps.

1. Connect to MySQL database.

2. Perform a query after successful connection to database.

3. After query execution encode the results in a JSON array and return back to client.

Database connection

To connect to MySQL database server we have to provide hostname, username, password and database name to mysqli function. $_POST super global array contains data from client side. On client side if we use method post, then on server data is inside $_POST super global array and if method in client form is GET then on server data is inside $_GET super global array.

In this article we have explored jQuery’s AJAX GET method to fetch results from Server.

jQuery AJAX Post method example

E Commerce Website Php Mysql Source Code

Now we are going to explore jQuery AJAX post method .

1. Create a file postdata.php inside ajaxjquery directory.

2. Add HTML code that will display form fields with a button.

3. When user fills in the form and clicks on button an AJAX POST request is sent to server.

4. After validations data is saved to database.

5. Server returns JSON encoded result back to client.

HTML form and jQuery Code

HTML form explanation

In the form tag we have created text boxes for first_name, last_name and email. New HTML5 attributes such as placehoder (Used to show a text to user inside text filed, This text disappears as user starts typing) and required (Used to validate so field is not empty) are used.

In HTML5 some new elements are also introduced like email. Email type will force user to enter a valid email address.

jQuery code explanation

Below the form code there is <script> tag to include jQuery. In next <script> there is a function that executes on onclick event of button with idsaveusers.

We are using .onfunction of jQuery that has two arguments.

1. event (click)

2. callback function. When user will click on button, callback function executes. In function get values of first name, last name and email using val() function in jQuery and save in variables.

$.AJAX function and validation

Dynamic Website Php Mysql Source Code

In $.ajax function we specify method to send data as POST, URL of PHP script and data to post. In .done function we check the response sent by server. Based on server response create a message , change color of text to red using jQuery’s .css function and then show it to user using .html function.

PHP server side code to save data to MySQL database

We create a connection to MySQL server, get data from client side and finally after validations, save data to database. In newer PHP versions mysql_* functions are deprecated.

Now mysqli or PDO functions are used, these newer functions provide prepared statements for preventing sql injection attacks.

Data validation

We have to perform server side validation as well. If any of the text box in form was empty, we have to show user an error message by sending $result value as 2, We create an prepared statement for insert and bind the parameters. After query execution success result is sent back to client end.

Insert data to database using jQuery ajax post

Summary

To summarize in this tutorial we learned about jQuery AJAX and how to perform GET and POST requests to server.

Source code for jQuery AJAX Get method

Click here to clone or download example source code for jQuery AJAX GET example From GitHub.

Source code for jQuery AJAX POST method

You can download or clonejQuery AJAX POST method source code from GitHub repository.

Please leave your comments and feedback below. To keep yourself updated please subscribe to our newsletter.

Related Articles:

Next Article:

Save

Save

Save

Save

Save