How many times have you encountered the fact that you entered incorrect data, because of which the page reloaded and completely deleted the characters entered in the fields. To fix this, there is a fairly popular approach to building a user interface, and its name is ajax. It appears in many projects and is used in many ways.
Sending an ajax form: connecting libraries
Include jquery library in index.php.
There is another way to include jquery in a document. You need to download the library from the jquery official site, place it in the right folder and paste the link to it like this:
Connecting and setting up documents
1. Create a.php document in the folder with the site with any name convenient for you - this will be sending the ajax php form. In it you can write in what format the text with the message will be displayed. For example, form1.php.
2. In your javascript files folder, create a.js file withany convenient name. For example, form.js.
3. Connect this folder to your document.
4. Create a form with the following parameters:
In it, do not forget to create fields for entering your data.
5. Go to the file form1.php in the directory with the site, in which write:
Now, when submitting the form, the browser will display information about the data.
In the same file, you can write what exactly will be displayed or how. You can also write cycles or algorithms here.
Sending ajax jquery form
1. In the created form.js file, you need to write the code that is responsible for making the file work after the site page is fully loaded.
$(document).ready(function(){ //Our next code will run here });
2. Then you need to customize the submit button. Do it all in the same file.
$("form").submit(function(event) { event.preventDefault(); //the following code will be written here });
The first part of the code is responsible for selecting the element on the page, and the second one is responsible for preventing the default action.
3. Then, for example, take an ajax form submission on success.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
The following are detailed descriptions of each setting.
- type -this is the type of request that is submitted in the form; since it costs POST, the request type will be appropriate;
- this - element selection inside the construct;
- attr - short for attraction, that is, a certain parameter of the selected target (form) is attracted;
- url - parameter responsible for where the request will be sent; in this case, what is written in the form parameters (form1.php);
- data - specifies form data;
- contentType - responsible for sending headers to the server; in this case it is not needed;
- cache - responsible for saving the user's cache;
- processData - responsible for converting data to a string;
- success - displays the result of a successful data submission; therefore, if sending data was successful, then the actions of the function are executed.
4. Done, now when submitting an ajax form, you will receive data without refreshing the page.
The result can be changed using the form1.php file, where you can specify what exactly will be displayed as a result. For example, You can experiment and create a check for the correctness of entering certain data: if the data is not correct, then the desired message is displayed, otherwise it redirects to the correct page. Many other things are also possible, whatever your heart desires.
There is also sending data to the server asynchronously. This is when the user enters text, and it is immediately highlighted in red, indicating that the entered data is not correct. About itthere are many manuals on the Internet, where everything is clearly explained and shown with examples.
Conclusion
Undoubtedly, ajax is a useful tool in website building. To make high-quality pages and interfaces, it is simply necessary. It is worth noting that it is very important to know jQuery to fully understand the picture and what is written in the code, because a simple copy-paste cannot always help and teach you to understand the code. It is always worth remembering that language versions are updated and some features may simply disappear. Therefore, not all solutions may be relevant, often the written code simply does not work or does not produce the result that you would like to see on your screen.
