How to use jQuery for ajaxify forms?

Question

I am trying to create an AJAXIFY form without using jQuery plugins. What is the process for doing this. I have my uniform. Why do I need to set an action? What should be the title of the script? Keep in mind that I do not want to use any plugins. I just need a basic algorithm for ajaxifying forms using jquery.

Answer 1

The action should be whatever it is if you are not using JavaScript .

NB: the links below all refer to the corresponding section of the jQuery documentation)

Then you bind the function to the submit event that serialized the form data and used it to make an Ajax request (it is possible to read the URI from the action attribute ). This would have prevented the default action for sending events.

I believe jQuery sets the HTTP request header with HTTP. Therefore, you just need to change the process on the server side to return different data, if any (with the correct value). It can be as simple as just switching to another view (if you are using the MVC pattern).

Answer 2

The easiest way is to use the $ .load () method.

$. load (action, data, callback)

The action can be a PHP script page, ASP, or just another web page. If the data is null, it performs a GET. Otherwise, it performs a POST. The callback method is executed when the method is completed (not necessarily successful).

http://docs.jquery.com/Ajax/load

For example:

 <form> $.load("scripts/processOrder.php", { item: itemID, quantity: ordered }, function { window.location.href = "orderComplete.htm"; }); </form> 

When the form is submitted, the processOrder script runs with the itemID and ordered arguments passed as data. Upon completion of the script, the browser will go to the orderComplete page for additional processing or displaying status.

If you want more control over Ajaxification, you can use the $ .get, $ .post or $ .ajax methods.

Answer 3

It depends. If you just want to submit your values ​​without reloading the page, I suggest you associate the form submit event with such a function

 jQuery('form#myForm').bind(submitValues); 

After that, you then set the function

 function submitValues() { //do stuff here jQuery.ajax({ //your ajax parameters here }); //this is important to cancel the default action on submit (ergo. go to the address as defined in action return false; } 

For more information on the ajax command, look here