title: Ask different response from servlet and use AJAX and JSP
body: <p>I'm new at this, I mean using JSP, servlet and JavaScript/jQuery/AJAX. I want to make the drop-down menu comes from new response depend on the request. But, it seems that I could not find a way to make the servlet send different response.<br>
  I want to use AJAX in order to avoid page reload, so the specific drop-down element that will be reloaded.<br>
  I'd made the service for the server side. The code I put here is the one in client side. In client side we use JSP, Servlet, and JavaScript/jQuery.</p>
  
  <p><strong>Here's my JSP:</strong></p>
  
  <pre><code>&lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;
  &lt;!DOCTYPE HTML&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;Coba aja&lt;/title&gt;
          &lt;script src="../js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="../js/basic.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;select name="idprovinsi" id="idprovinsi"&gt;
              &lt;option value="" &gt;--Pilih Provinsi--&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;select name="idkota" id="idkota"&gt;
              &lt;option value="" &gt;--Pilih Kota/Kabupaten--&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;select name="idkecamatan" id="idkecamatan"&gt;
              &lt;option value="" &gt;--Pilih Kecamatan--&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;select name="iddesa" id="iddesa"&gt;
              &lt;option value="" &gt;--Pilih Desa--&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;input type="hidden" id="dropdown" value=""&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><br>
  <strong>Here's my JavaScript:</strong></p>
  
  <pre><code>var arrayProvinsi = new Array();
  var arrayKota = new Array();
  var arrayKecamatan = new Array();
  var arrayDesa = new Array();
  
  $(document).ready(function() {
  $('#idkota').hide();
  $('#idkecamatan').hide();
  $('#iddesa').hide();
  //alert("load pertama kali!");
  
  
      $('#idprovinsi').ready(function(){
          //alert("masuk ready!");
         $.ajax({
             url:"../update",
              type:"POST",
              dataType:"json",
              success: function(msg){
                  //alert(msg);
                  //alert(msg.length);
  
                  var temp = new Array();
                  temp = msg.arrayProvinsi;
  
                  //alert(temp);
                  //alert(temp.length);
  
                  var selObj = document.getElementById("idprovinsi");
  
                  for (var i=0; i &lt; temp.length;++i)
                  {
                      //alert("nama:"+msg[i].provinsiname);
                      addOptionProvinsi(selObj, temp[i].provinsiname, temp[i].idprovinsi);
                  }
              }
         });
      });
  
      $('#idprovinsi').change(function(){
          //alert($('#idprovinsi').val());        
          $('#idkota').show();
          $('#dropdown').val("kota");
          alert("dropdown provinsi change alert! nilai id provinsi: "+$('#idprovinsi').val()+" nilai dropdown:"+$('#dropdown').val());
  
           $.ajax({
             url:"../update",
              type:"POST",
              dataType:"json",
              success: function(msg){
                  alert(msg.length);
                  var temp = new Array();
                  temp = msg.arrayKota;
                  alert(temp.length);
                  var selObj = document.getElementById("idkota");
                  for (var i=0; i &lt; msg.length;++i)
                  {
                      alert("nama:"+temp[i].kotaname);
                      addOptionKota(selObj, msg[i].kotaname, msg[i].idkota);
                  }
              }
         });
      });
  
  });
  
  function addOptionProvinsi(selectbox,text,value )
  {
      if(isInArray(text, arrayProvinsi)){
  
      }else{
          arrayProvinsi.push(text);
          var optn = document.createElement("OPTION");
          optn.text = text;
          optn.value = value;
          selectbox.options.add(optn);
      }
  
  }
  
  function addOptionKota(selectbox,text,value )
  {
      if(isInArray(text, arrayKota)){
  
      }else{
          arrayKota.push(text);
          var optn = document.createElement("OPTION");
          optn.text = text;
          optn.value = value;
          selectbox.options.add(optn);
      }
  
  }
  
  function isInArray(value, array) {
    return array.indexOf(value) &gt; -1 ? true : false;
  }
  </code></pre>
  
  <p><br>
  <strong>Here's my servlet:</strong></p>
  
  <pre><code>@WebServlet("/update")
  public class CobaServlet extends HttpServlet {
  
      @Override
      protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
  
      } 
  
      @Override
      protected void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
          Map &lt;String,Object&gt; map= new HashMap&lt;String, Object&gt;();
          //get data All Provinsi
          String url="";
      CallService cs= new CallService();
      String feedback ="";
          MultivaluedMapImpl  params = new MultivaluedMapImpl();
  
          String dropdown     = request.getParameter("dropdown");
  
          String idprovinsi   = request.getParameter("idprovinsi");
          String idkota       = request.getParameter("idkota");
          String idkecamatan  = request.getParameter("idkecamatan");
          String iddesa       = request.getParameter("iddesa");
  
  
          if(idprovinsi != null &amp;&amp; !idprovinsi.equals("")){
              //get data All Kota
              url = "http://localhost:8080/sPuskesmas/rest/kotaservice/getKotaByIdprovinsi";
              params.add("idprovinsi", idprovinsi);
              feedback = cs.callGetService(url,params);
              JSONArray arrayKota= JsonToArray.toArray(feedback);
  
              //write(response, arrayKota);
              //request.setAttribute("arrayKota", arrayKota);
              map.put("arrayKota", arrayKota);
              write(response,map);
           }
          else if(idprovinsi==null || idprovinsi.equals("")){
              url = "http://localhost:8080/sPuskesmas/rest/provinsiservice/getAllProvinsi";
              feedback = cs.callGetService(url);
              JSONArray arrayProvinsi= JsonToArray.toArray(feedback);
  
              //write(response, arrayProvinsi);
              //request.setAttribute("arrayProvinsi", arrayProvinsi);
              map.put("arrayProvinsi", arrayProvinsi);
              write(response,map);
  
          }
      }
  
      private void write(HttpServletResponse response, Map&lt;String, Object&gt; map) throws IOException {
          response.setContentType("application/json");
          response.setCharacterEncoding("UTF-8");
          response.getWriter().write(new Gson().toJson(map));
      }
  
      private void write(HttpServletResponse response, JSONArray arrayNya) throws IOException {
          response.setContentType("application/json");
          response.setCharacterEncoding("UTF-8");
          response.getWriter().write(new Gson().toJson(arrayNya));
      }
  
  }
  </code></pre>
  
  <p><br>
  I don't know how I can get different response, because I always get the same first response. <strong><em>I just want to access different part of the servlet so I can get the response I want</em></strong>. Can you help me solve it? </p>
  
  <p>Thank you so much.</p>