Submit Form Without Page Refresh Using Ajax Jquery Php

Hi! In this tutorial we will see how to lớn submit khung using jquery ajax và php without page refresh. Web Development enhanced with AJAX increases speed và performance thereby improving the overall user experience. It allows you to lớn update part of a website page without refreshing it completely. Basically, when you submit an html form, the entire page will be refreshed. But by using ajax technique, you can submit the khung to the web hệ thống without having to reload the page. Instead, the size data will be submitted to the hệ thống in the background and can be processed in any way you want.

Bạn đang xem: Submit form without page refresh using ajax jquery php


How to lớn Submit form using jQuery AJAX and PHP?

The jQuery library provides ajax() method which allows you to submit form without refreshing page. It will send an HTTP request khổng lồ the web vps (here is the php script), which is then processed by the server and sends an http response.

Let"s see how to do it.

Step 1) Create a Basic HTML Form

First let"s create a simple html khung containing some đầu vào fields & a submit button.

Step 2) showroom a Placeholder for server ResponseAdd a div block next to the form. This will act as a placeholder to lớn display the hệ thống response.

Xem thêm: Bộ Bài Tarot Phiên Bản 12 Cung Hoàng Đạo Tarot Tượng Trưng Cho 12 Cung Hoàng Đạo

Step 3) Load jQueryWe"ll need jquery library to send ajax call. So load it after all the html components but just before the closing toàn thân tag.

Step 4) The AJAX ScriptNow it"s time to lớn write the ajax script. địa chỉ cửa hàng the following script after loading "jquery.js" file.

In the above JS, we have called ajax() function on size submission event. Using preventDefault() will cancel the original sự kiện and prevent the page from reloading.

There are several options that you can configure for the ajax() function và I have used some in the example. Here are the details of what they represent,

The url specifies the hệ thống script lớn which the http request should be sent. The type defines the type of request to lớn be sent. Here I phối it as "POST" lớn send HTTP POST request. The data can be string or object và contain the khung data. The success function will be executed when the server responds true. & the error function will be triggered if the request fails.

Complete Script: index.html

AJAX size Submit without Page Refresh