Question

I’m working on a PHP / AJAX application and it’s quickly becoming unmanageable!

The application is designed to work much like a a desktop application so almost every user action results in an AJAX call.

For every one of these actions I have some jQuery that posts the data to my PHP script and runs a corresponding PHP function that handles the server side actions.

That means in my jQuery file i’ll have something like this:

$('.delete-project').on('click', function(){
     // Ajax request to http://myapp.co.uk/ajax/delete_project
});

$('.delete-user').on('click', function(){
     // Ajax request to http://myapp.co.uk/ajax/delete_user
});

$('.delete-keyword').on('click', function(){
     // Ajax request to http://myapp.co.uk/ajax/delete_keyword
});

I’m sure there is a better way of doing things, but how is it generally done to avoid lots of similar code? The above actions could possible rolled into one ‘delete’ ajax request which posts the item type and a database ID but a lot of my functions post different data and require different parameters so wouldn’t fit so neatly under one jQuery handler.

I’ve tried finding some resources on how an AJAX application should be put together but all I can find is beginner tutorials on making AJAX requests etc, not how to write a scalable AJAX application.

Just to be clear I know how AJAX works, I’m just trying to find the best way of implementing it in terms of reducing the jQuery and PHP needed where possible.

Are there any good resources that deal with this sort of thing?

Answer 1

You can roll all those into one delete function by using attributes in HTML, for example:

$('.delete').on('click', function(){
     var delete = $(this).attr('data-delete');
     // Ajax request to http://myapp.co.uk/ajax/delete_{delete}
});

Then your HTML would be something like:

<a href="#" class="delete" data-delete="project">Delete</a>

More information on data-attributes