PHP Ajax with jQuery
PHP Ajax with jQuery is a course in building Ajax web applications with PHP 8.5 and MySQL, using jQuery 4 alongside the Fetch API, covering JSON, PDO, autocomplete forms, file uploads, login, security and REST APIs. It suits developers and IT managers with some PHP and JavaScript, and you leave able to build a small Ajax online shop yourself.
- Duration24 hours · 4 days
- FormatOnsite / live online
- Next roundOn request
- CertificateIncluded
Course overview
Ajax lets a web page send and receive data from the server without reloading the whole page, so it underpins instant forms, search boxes with suggestions, shopping carts and almost every back-office system. Browsers now provide the Fetch API as standard, many PHP systems still use jQuery, and PHP 8.5 makes JSON APIs shorter and safer to write. Developers therefore benefit from writing Ajax both ways and designing the server side correctly.
This new edition teaches Ajax web application development with PHP 8.5 and MySQL 9.7, using jQuery 4 and the Fetch API side by side. It covers Ajax principles and JSON, PHP that returns JSON, databases with PDO, forms, autocomplete and file uploads, login systems, security, client state and REST APIs, and finishes with a workshop that builds an Ajax online shop. (4 days, 6 hours per day, 24 hours in total, Intermediate level.)
What you’ll gain
- Understand Ajax, HTTP and JSON, and choose suitable data formats
- Write PHP 8.5 that receives and returns JSON with the correct status codes
- Make Ajax calls with both jQuery 4 and the Fetch API, and choose the right one for the job
- Use PDO to work with MySQL safely, and build autocomplete forms and Ajax file uploads
- Build an Ajax login system and protect against CSRF, XSS and cross-origin risks
- Develop a small Ajax web application from the database to the web page on your own
Who this course is for
- Developers who have written PHP and JavaScript for a while and want to build Ajax web applications
- Developers who maintain existing PHP systems that use jQuery and want to modernise them
- IT managers and team leads who want to understand how Ajax web applications are structured
- People who have completed basic PHP and JavaScript courses
Prerequisites
- A basic understanding of building websites with PHP and JavaScript (essential basics are reviewed)
- Some experience with MySQL or basic SQL
- Able to install and uninstall software, and basic use of the internet and networks
Curriculum
Course Details
This course is the 2026 edition of PHP Ajax with jQuery, rewritten for PHP 8.5, MySQL 9.7 LTS and jQuery 4, with the Fetch API taught alongside jQuery in every topic. It runs for 4 days, 6 hours per day (24 hours in total, 09:00-16:00), as lectures alternating with labs and workshops throughout. Intermediate level. Learners write PHP that returns JSON, use PDO with MySQL, build autocomplete forms and Ajax file uploads, create a secure login system, manage state with the History API, make cross-origin calls with CORS and design REST APIs, then bring it all together in a workshop that builds an Ajax online shop. They take home the source code for every lab.
Day 1 Modern Ajax with PHP 8.5, jQuery and Fetch
Section 1: Lab: Setting Up the Development Environment
- Install PHP 8.5 and MySQL 9.7 LTS locally or with Docker
- Serve pages with the PHP built-in server and organise the project folders
- Use VS Code and the Network panel in Chrome DevTools
- Review the PHP and JavaScript you need for this course
- Lab: a first web page that loads data from PHP
Section 2: Ajax, HTTP and JSON Principles
- How Ajax works, from XMLHttpRequest to the Fetch API
- Requests, responses, methods, headers and HTTP status codes
- JSON structure and why it replaced XML
- Ajax patterns such as partial updates, instant search and load more
- Read real requests and responses in the Network panel
Section 3: Lab: PHP 8.5 for JSON Responses
- json_encode, json_decode and JSON_THROW_ON_ERROR
- Set Content-Type and status codes with http_response_code
- Read JSON from the request body through php://input
- Language features that shorten code, such as match, enums and the pipe operator
- Lab: an API file that returns a product list and standard error messages
Section 4: Lab: jQuery 4 Ajax
- .load(), $.get, $.post and $.getJSON
- $.ajax with method, data, dataType and timeout options
- Use jqXHR as a promise and with async/await
- Page-level Ajax events and $.ajaxSetup
- Lab: a news list page that loads and filters with Ajax
Section 5: Lab: The Fetch API alongside jQuery
- fetch with GET and POST, sending JSON
- async/await, checking res.ok and try/catch
- Cancel requests and set timeouts with AbortController
- Side-by-side comparison of jQuery and Fetch, and how to choose
- Lab: rewrite the same page with the Fetch API and compare the results
Day 2 Databases, Forms and Files with Ajax
Section 6: Workshop: Designing a MySQL Database
- Design tables, relationships, primary keys and foreign keys
- A sample shop database structure from a real project
- Data types, utf8mb4 and indexes that speed up searches
- Create database users and set privileges in MySQL
- Workshop: create the database with phpMyAdmin and an SQL file
Section 7: Lab: PDO and Prepared Statements
- Connect to MySQL with PDO and enable exception mode
- Create, read, update and delete data with prepared statements
- Prevent SQL injection and handle errors safely
- Transactions for work that writes to several tables
- Lab: a product management API backed by a real database
Section 8: Lab: Ajax Forms
- Submit forms with .serialize() and FormData without reloading the page
- Validate in the browser and again in PHP
- Return field-level errors as JSON and show them under each field
- Prevent double submission and show saving status
- Lab: a contact form and an add-product form with Ajax
Section 9: Lab: Autocomplete and Instant Search
- Search as you type with debounce to reduce requests
- LIKE queries and using indexes for fast searches
- jQuery UI Autocomplete, and the datalist element as an alternative
- Fill in the form automatically from the selected item
- Lab: a customer search box that fills in the address instantly
Section 10: Lab: Ajax File Uploads
- Send files with FormData using both jQuery and Fetch
- Show progress and preview images before sending
- Check file types with finfo and limit sizes in PHP
- Rename files and store them outside folders that can run scripts
- Lab: upload several product images with delete and reorder
Day 3 Login, State and Ajax Security
Section 11: Lab: An Ajax Login System
- Store passwords with password_hash and check them with password_verify
- Sessions, session_regenerate_id and secure cookie settings
- Return login results as JSON and redirect to the right page
- Limit failed login attempts, and log out
- Lab: a login page and member pages that check permissions on every request
Section 12: Security of Ajax Web Applications
- CSRF tokens and sending them in Ajax request headers
- Prevent XSS with htmlspecialchars and .text() or textContent
- Check permissions on every endpoint and never trust browser data
- Keep error details and secrets out of responses
- A security checklist before going live
Section 13: Lab: Managing Client-Side State
- Keep state in sessionStorage and localStorage as JSON
- Cache server data and clear the cache when data changes
- The History API: pushState and popstate instead of disabling Back
- Reflect search terms and pages in the URL so a refresh keeps them
- Lab: a product search page that remembers filters and handles Back correctly
Section 14: Lab: Cross-Origin Ajax with CORS
- The same-origin policy and why browsers block requests
- Set CORS headers in PHP, and preflight requests
- Send cookies across origins with credentials, carefully
- The risks of JSONP and moving older code to CORS
- Lab: a page on another domain that calls our API safely
Section 15: Lab: Debugging and Testing Ajax
- Inspect requests, headers and payloads in the Network panel
- Breakpoints and the console in Chrome DevTools
- Read the PHP error log and set error display for each environment
- Test APIs with VS Code REST Client
- Lab: find and fix bugs in a prepared sample page
Day 4 REST APIs and an Online Shop Workshop
Section 16: Lab: Designing a REST API with PHP
- Name endpoints and use GET, POST, PUT, PATCH and DELETE
- A simple router and separate controller files
- Consistent response and error formats
- Pagination, sorting and filters through the query string
- Lab: a products and categories REST API covering every method
Section 17: Lab: Loading More and Automatic Updates
- Button paging and infinite scroll with IntersectionObserver
- Refresh data at intervals with polling
- Server-Sent Events with PHP for one-way notifications
- Reduce server load with caching and ETags
- Lab: an orders page that updates status automatically
Section 18: Workshop: Shop Front and Cart
- A product list with Ajax search, filters and paging
- Product detail pages and images
- A cart that adds, reduces and removes items without reloading
- Keep the cart in the session and show totals instantly
- Workshop: connect the shop front to the REST API you built
Section 19: Workshop: Checkout and Back Office
- A checkout form validated on both sides
- Save orders across several tables with a transaction
- A back-office page for changing order status
- Check administrator permissions and protect against CSRF
- Workshop: test the whole process from ordering to status updates
Section 20: Workshop: Testing, Going Live and Presenting
- Test every endpoint and page on mobile and desktop
- Configure PHP and MySQL for production and back up the database
- Go live on hosting or a server with Docker
- Review the security and performance checklist
- Present your work and next steps
Schedule & training options
For individuals — public rounds
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
For organisations — in-house / private
- Tailor the content to your team’s tools and projects
- Your dates, at your office or live online
- Quotation with tax ID for procurement
Instructors
Frequently asked questions
What is Ajax and how does it work?
Ajax is a technique where JavaScript sends requests to the server in the background and uses the result to update part of the page without reloading it, for example checking a username while you type or loading more products as you scroll. Browsers now use the Fetch API as standard, while jQuery's $.ajax is still widely used in existing systems. Servers usually reply with JSON rather than XML because JavaScript can use it straight away.
How do I send form data to PHP with Ajax without reloading the page?
Listen for the form's submit event and call preventDefault, collect the fields with FormData or .serialize(), then send them with fetch or $.ajax to a PHP file. In PHP, read the values from $_POST or read JSON from php://input, validate them again, save them with PDO and prepared statements, and reply with json_encode and the correct status code. The page can then show a message or field-level errors. Always send a CSRF token as well.
Should I use jQuery Ajax or the Fetch API?
The Fetch API is built into every browser with no extra library and works naturally with async/await, so it suits new work. jQuery Ajax suits systems that already use jQuery, because it is concise and offers options such as timeouts and page-level Ajax events out of the box. Note that fetch does not treat statuses such as 404 or 500 as errors, so you must check res.ok yourself. This course teaches both side by side so you can choose for each job.
Who is the PHP Ajax with jQuery course for, and what should I know beforehand?
It suits developers who have written PHP and JavaScript for a while, developers who maintain existing PHP systems that use jQuery, and IT managers who want to understand how Ajax web applications are structured. You should have a basic understanding of building websites with PHP and JavaScript and some experience with MySQL or SQL. If you are not yet confident, the essential basics are reviewed at the start.
What will I be able to do after the PHP Ajax with jQuery course?
You will be able to write PHP 8.5 that returns JSON, make Ajax calls with both jQuery 4 and the Fetch API, use PDO with MySQL safely, build Ajax forms, autocomplete fields and file uploads, create an Ajax login system, protect against CSRF and XSS, manage state with the History API, call APIs across origins with CORS, design REST APIs and build an Ajax online shop. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
Can the PHP Ajax with jQuery course be run in-house for our team?
Yes. This course can be run in-house for your team, with examples adapted to your work, such as adding Ajax to forms and search pages in the systems your team maintains, or making existing Ajax code more secure. You can request a quotation from this page or contact us on LINE @itgenius or by phone on 02-570-8449.
Related articles
Articles are published in Thai.