In modern web development, it's common to send form data to a server without refreshing the entire page. AJAX (Asynchronous JavaScript and XML) with jQuery provides a convenient way to achieve this. In this article, we'll explore a basic example of sending form data to a server using AJAX and jQuery.<\/p>\r\n
index.php<\/strong><\/p>\r\n or send data in variable<\/p>\r\n your_server_endpoint.php<\/strong><\/p>\r\n <\/p>\r\n You must add jquery first to make this code working..<\/p>\r\n By combining HTML forms, jQuery, and AJAX, you can create dynamic and responsive web applications that communicate seamlessly with servers. This basic example provides a foundation for more complex interactions, such as handling JSON data or incorporating additional form validation. Feel free to adapt the code to suit your specific project requirements.<\/p>","category_id":"28","is_private":"0","created_at":"2023-11-10T02:34:32.000000Z","updated_at":"2023-11-10T02:36:42.000000Z","category":{"id":28,"user_id":"1","name":"Jquery","slug":"jquery-k1v4","parent_id":"12","created_at":"2023-11-10T01:48:35.000000Z","updated_at":"2023-11-10T01:48:35.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"In modern web development, it's common to send form data to a server without refreshing the entire page. AJAX (Asynchronous JavaScript and X - Ajax Jquery: send form data to server using AJAX JQuery (Updated: November 10, 2023) - Read more about Ajax Jquery: send form data to server using AJAX JQuery at my programming site [SITE]","categories":[]}<form id=\"formid\" action=\"your_server_endpoint.php\" method=\"post\">\r\n <label for=\"name\">Name:<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\">\r\n\r\n <label for=\"email\">Email:<\/label>\r\n <input type=\"text\" id=\"email\" name=\"email\">\r\n\r\n <label for=\"superheroAlias\">Superhero Alias:<\/label>\r\n <input type=\"text\" id=\"superheroAlias\" name=\"superheroAlias\">\r\n\r\n <input type=\"submit\" value=\"Submit\">\r\n<\/form>\r\n<script>\r\n$(document).ready(function() {\r\n $(\"#formid\").submit(function(e) {\r\n e.preventDefault(); \/\/ Prevent the actual form submission.\r\n var form = $(this);\r\n var url = form.attr('action'); \/\/ The URL where the form data will be sent.\r\n \/\/ Serialize the form data to send it to the server.\r\n var formData = form.serialize();\r\n $.ajax({\r\n url: url,\r\n type: 'POST',\r\n data: formData,\r\n error: function() {\r\n alert(\"Error occurred while submitting the form.\");\r\n },\r\n success: function(data) {\r\n alert(\"Server response: \" + data);\r\n }\r\n });\r\n });\r\n});\r\n\r\n<\/script>\r\n<\/code><\/pre>\r\nvar data = {\r\n 'name' : 'rizwan',\r\n 'email': gondal@gm,\r\n 'superheroAlias' : ok\r\n};<\/code><\/pre>\r\n<?php\r\nif ($_SERVER[\"REQUEST_METHOD\"] === \"POST\") {\r\n \/\/ Access the form data sent via AJAX.\r\n $name = $_POST[\"name\"];\r\n $email = $_POST[\"email\"];\r\n $superheroAlias = $_POST[\"superheroAlias\"];\r\n\r\n \/\/ Process the data or perform any necessary actions.\r\n \r\n \/\/ Send a response back to the client (optional).\r\n echo \"Data received successfully!\";\r\n} else {\r\n \/\/ Handle other types of requests or show an error.\r\n echo \"Invalid request method.\";\r\n}\r\n?>\r\n<\/code><\/pre>\r\n