jQuery Ajax Example with JSON Response

On one of my first big Javascript projects I learned how to use jQuery and especially its Ajax function. Nowadays I use the library almost everyday for displaying, fetching and controlling the web.

jQuery is a Javascript library which has been made to ease the development of JavaScript based websites and it offers massive framework for frontend web development. One major and maybe the best part of it is Ajax, Asynchronous JavaScript and XML. In common language you can you can load data into a website without refreshing it. On this post I will demonstrate how to use this function.

jQuery Ajax

The basic syntax of jQuery Ajax is:

There are tens of settings you can use for the function. But usually we are interested in the url. The new syntax of jQuery ajax recommends everyone to use Promises. Which gives the function multiple callback options, like done and fail.

Example

In this example I will show you how to do Ajax with jQuery and how to process multidimensional JSON data table coming in through Ajax.

This example is partly taken from a wine project which I was developing some time ago. On the project we did a lot of coding with Javascript and the main function was jQuery’s Ajax. In that project were creating a software with HTML5, Javascript, CSS and on the serverside with PHP and MySQL. The project wasn’t a great success but it taught me a lot about JavaScript. This example is about some of the technologies we were using on that project.

You can test this example at https://www.lennu.net/demo/jqueryajax/.

'jQuery Ajax Example with JSON Response

HTML

We will start with HTML skeleton with jQuery already embedded in it from Google.

Inside HTML we have three buttons, these buttons will be used for getting different kind of wines from our serverside.

There is also a div where the wines will appear after being fetched from serverside.
Add the Javascript code below to line 7.

Javascript

Here we have the Javascript for the HTML.

Basically we have a submit event that fires when a button is clicked.
Next we take the value of the button clicked and send it to serverside.php with jQuery’s ajax()-function. From this function we get back our JSON data which we’ll process on success.

After that it’s simple if and else to append our #wines div.

Add this to the HTML Skeleton in HEAD section.

Serverside

Now we need the serverside where Ajax will connect, create this file by the name of serverside.php if you wish everything to run smoothly.

This simple php gets clicked buttons value sent from our Ajax-function. After that we create a multidimensional data table.

Finally we do a PHP’s JSON-encoding and if else the right table to send back to Ajax.

These codes will produce a working HTML site with jQuery doing some cool Ajax! You can use them as a skeleton when you are building your own Ajax based website.

More Javascript Coming Soon!

I hope you have learned to do Ajax with jQuery from this example and can use this example maybe for something cool and useful! I’m gonna post more Javascript themed topics in the near future, so follow my Twitter to find out about new posts.

  • Vitor Oliveira

    excellent

  • arun

    very nice and useful…thank you so much buddy

  • Ellert_van_Koperen

    Actually the usage of the sucess: function is deprecated since 2011.
    see http://stackoverflow.com/a/14754681/1697370

    • Thanks for pointing that out. I updated the code to match modern standards.

  • I don’t know php.
    Can you just do it client side.

  • Haha same.

  • Priya

    Hi,
    The article is very clear and useful for a beginner like me. But the problem is I couldn’t get the result when I copied the same file for learning. I put everything into an index file and the server-side stuff into the php file as you said. I’m sure I made a mistake somewhere but I couldn’t find that. Can you please help me out.

  • Hifni Nazeer

    Thank You very much! Great Article! 🙂

  • DEEPAK BHOSALE

    nice and clear example. thanks

  • Jayshri Nikam

    This code doesnt work for me..For the php code I get error “No element found”. Please help me with the fix or I would really appreciate if you could mail me the working copy of this code.

  • Harish Patel

    Clearly define example Lenun…

  • Kornelije Kovac

    Lame

  • prashanth

    but when i click button any one of following its doesn’t perform any action and it doesn’t get data from php file.? whats the problem???

    • It should work perfectly okay. Are you sure you followed the tutorial correctly and copied all the necessary files?

  • www.newsmother.com