Cordova Android Application with Jquery Ajax request example that returns JSON

In this tutorial, let us see the steps to develop cordova android application that makes ajax request to  a web service or servlet that returns JSON array data using JQuery. If you are new to cordova app development then go through my earlier tutorial how to develop hello world app in Apache Cordova. For developing restful web service, you can visit my earlier tutorial building web service in java.   In this example, we will create an cordova android app having two radio buttons (Veg and Non Veg) and display menu items in a drop down list  based on the radio button selection.

Now let us see the steps to develop the application

This application has two parts (Part 1 and 2)

1. In Part 1, we  will be developing Mobile app using Cordova. This app will have two radio buttons. and one drop-down list component to display recipe menu items. On clicking the radio button will call the servlet that returns JSON data array.

2. In Part 2, we will develop a separate Dynamic web project having  servlet & DAO code for  returning JSON data array.

Before developing the app, you have to install and configure Apache cordova. You can visit my earlier tutorial for installing and configuring Apache Cordova in windows machine.

Technologies used

Apache Cordova 5.1.1
Java 1.8
JQuery Mobile 1.4.5
Eclipse Luna Service Release 2 (4.4.2)
Android 5.1.1

java-json.jar

Part 1: (Creating Cordova Android Project)
1. Create a new cordova project (CordovaJQueryExample). Run the below command to create the project template.

F:\Cordova\Demo> cordova create CordovaJQueryExample net.javaonline.cordova.example.jquery CordovaJQueryExample

Once the project is created, you can see the config.xml file and other folders inside the directory CordovaJQueryExample as given in the below image. The config.xml, index.html and other files under www are common to all platforms. When the platform is added, these files are copied to that platform.

dir structure1

 

2. Add android platform for the cordova project

Change to the folder CordovaJQueryExample and give the below command

F:\Cordova\Demo\CordovaJQueryExample>cordova platform add android

Now You can find android folder inside the platforms folder. Each platform will have own copy of www folder under assets folder.

3. Add the Cordova project (android)  to eclipse

File -> Import -> Existing Android Code into WorkSpace

import cordova project to eclipse

Select the root directory as given below

F:\Cordova\Demo\CordovaJQueryExample\platforms\android

and change the project name as CordovaJQueryExample and  finish . Now two projects are imported

  1. CordovaJQueryExample

2. CordovaLib which contains cordovalib.jar

Please compile to re-create the same jar.

Now add the folder www (which is common to all platforms) to the project CordovaJQueryExample.  You can see the following project structure.

Project Structure of Cordova Project:

cordova jquery project dir1cordova jquery project dir2

As per your requirement, you can add or change the files under www folder (shown in the above image) which is common to all platforms so that the changes/addition is copied to each platforms when you build the project.

4. Now let us develop the Cordova Jquery project. We are changing the following files to design our project.

index.html
index.js

The default index.html is modified to have the components of radio buttons and drop down list (select) as given in the below image.

cordova jquery output

This index file uses the following libraries

1. jquery.mobile-1.4.5.min.js
2. jquery.mobile-1.4.5.min.css

The complete index.html file is given below

index.html

5. Change the index.js file to use ajax for calling the servlet (getMenuList) that returns json array (dishes list) based on the selection of radio button (Veg/Non Veg). Include this index.js in the index.html. The complete index.js file given below.

index.js

If you have developed any web service that returns JSON array and want to use that service, then replace the above servlet url mentioned in the function getMenuList in the index.js file with your web service url.

In the index.js, the function menuListJsonDataParse parses the JSON array and each item in the array is added to the drop down list box. Bind the change event of radio buttons and drop down list which are required on on start up.

Part 2: (Creating Dynamic Web Project)

6. Please ensure the you have created and started JavaOnlineWeb project with the servlet (getMenuList) in the same server or any other.

Dynamic Web Project Structure:

javaonlineweb

The servlet and DAO is given below

GetDetails.java

 

JSONDao.java

6. Now the Cordova Android project (CordovaJQueryExample) is ready. Now you need to build the project. Building the project will create .apk file. You can copy the .apk file to any device with android OS. To run with eclipse, you need to create an Android emulator. To create emulator, you can go through my tutorial,,,

Now run the project

Run the project JQ

Output:

Output Jquery1

Now click on Veg and select dish from the drop-down box

Output Jquery2

Output Jquery3

 

Similarly, click on Non-Veg radio button and select any dish from the drop-down list

Output Jquery4

Output Jquery5

When we select any radio button, jquery sends the request to the server through ajax call. The server returns the JSON array data.  The received JSON data is parsed and displayed in the drop-down list.

Reference : Apache cordova documentation

You may also like

Leave a Reply