Search code examples
javapostgresqlservletsember.jshttprequest

how to send data from java servlet to ember.js and vice versa


so i have a servlet hosted which is connected to postgres database the thing is i need to create a login page which should send data to the servlet which is hosted in tomcat and also the servlet will have a set of ids and price that should be returned back to ember for displaying how can i do that?

the servlet code example (have added only the neccessary parts so ignore errors in servlet)


import java.io.IOException;
import java.io.PrintWriter;
import javax.security.auth.login.Configuration;
import java.util.HashMap;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.security.auth.login.AppConfigurationEntry;
import javax.security.auth.login.LoginContext;
import javax.sql.rowset.serial.SerialException;

public  class AuthenticationServlet extends HttpServlet{
    public static LoginContext loginContext = null;
    protected void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException{
        String name = null;    
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.println("<html><body>");
        String user = request.getParameter("uname");
        String mobile = request.getParameter("mobile");
        System.out.println("user -> "+user + "mobile "+ mobile);
}

the servlet code which prints the data from postgres which must be modified so that the ember should print it

        ResultSet rs = null;
        try {
            System.out.println("[+]inside showrooms..");
            String query = String.format(
                    "SELECT room.id,capacity,rtype,price FROM room JOIN capacity ON room.cid=capacity.id JOIN rtype ON room.tid = rtype.id WHERE isavailablle = true;");
            stmt = con.createStatement();
            rs = stmt.executeQuery(query);

            response.setContentType("text/html");
            PrintWriter out = response.getWriter();
            out.println("<head>");
            out.println("<body>");
            out.println("<table>");
            out.println("<tr>");
            out.println("<td><b>roomno</b></td>");
            out.println("<td><b>capacity</b></td>");
            out.print("<td><b>roomtype</b></td>");
            out.println("<td><b>price</b></td>");
            while (rs.next()) {
                out.println("<tr>");
                out.print("<td>" + rs.getString("id") + "</td>");
                out.print("<td>" + rs.getString("capacity") + "</td>");
                out.print("<td>" + rs.getString("rtype") + "</td>");
                out.println("<td>" + rs.getString("price") + "</td>");
                out.println("</tr>");
            }
            out.println("<form method='post' action=\"My\">");
            out.println("<table>");
            out.println("<tr>");
            out.println("<td><h2>Select a room number</td></h2></tr>");
            out.println("<tr><td><input type = 'text' name = 'roomno'></td></tr>");
            out.println("<tr><td><h4>Enter the start date(YYYY-mm-dd)</h4></td></tr>");
            out.println("<tr><td><input type=\"date\" placeholder=\"yyyy-mm-dd\" id=\"sdate\" name=\"sdate\"\r\n"
                    + "       value=\"2022-07-01\"\r\n"
                    + "       min=\"2022-07-01\" max=\"2022-07-31\"></td></tr>");
            out.println("<tr><td><h4>Enter the end date(YYYY-mm-dd)</h4></td></tr>");
            out.println("<tr><td><input type=\"date\" placeholder = \"yyyy-mm-dd\" id = \"edate\" name = \"edate\""
                    + " value=\"2022-07-01\"\r\n"
                    + "min= \"2022-07-01\" max =\"2022-07-31\"></td></tr>");
            out.println("<tr><td><input type = 'submit' value = 'reserve'>");
            out.println("</table></body></html>");

        } catch (Exception e) {
            System.out.println(e);
        }
    }


Solution

  • So after working out and getting a hold on ember and servlet it seems that there are multiple ways to send and receive data between ember and servlet like a traditional http request using ajax.

    Sending a http request can be done via a controller from ember importing ajax a sample http request can be like

    import Controller from '@ember/controller';
    import { action } from '@ember/object';
    
    export default class IndexController extends Controller {
      @action
      get() {
        var dis = this;
        var uname = document.getElementById('uname').value;
        var pass = document.getElementById('pass').value;
        console.log('name ->' + name + 'pass -> ' + pass);
        $.ajax({
          url: 'http://localhost:8080/auth/Login',
          data: {
            uname: uname,
            pass: pass,
          },
          method: 'GET',
          success: function (response) {
    
            if (response == 0) {
              alert("welcome");
              dis.transitionToRoute('app');
            }else if(response == 1){
              alert("Password needed to be changed");
              dis.transitionToRoute('resetpwd');
            }
    
          },
          error: () => {
            alert('error');
          },
        });
      }
    }
    
    

    dependencies: ember-ajax https://www.npmjs.com/package/ember-ajax

    so this ajax request here sends a request with uname and password as parameter and act accordingly with the response. if you want to recieve data files like a json object from servlet or any other back end you can also do that. you can refer the following answer by @NullVoxPopuli which answers the same.

    couldnt render a json array from servlet in ember js

    but the good method is to use ember data which follows a series of action including

    1. creating a model for the json data
    2. creating an adapter for the request
    3. creating a serializer for serializing the incoming data
    4. importing the model in your router.

    you can have a detailed view of this in the following youtube video

    https://youtu.be/ljLxZw-XStw

    and if you want me to explain more with regard to your code comment it