title: Pass json data to servlet (doPost) with Jquery $.ajax
body: <p>i'm learning about calls to ajax so i'm trying to get the value of ('#abcd') (a html select). I'm using this line:</p>
  
  <blockquote>
    <p>abcdVal = combo.options[combo.selectedIndex].value</p>
  </blockquote>
  
  <p>When this value change i must store his value in a var like abcdVal for pass to servlet with:</p>
  
  <blockquote>
    <p>var data = {"text" : abcdVal};</p>
  </blockquote>
  
  <pre><code>j("#mybutton").click(function(){    
      j.ajax({method: 'POST',
          url: "/bin/company/repo",
          dataType: 'JSON',
          data: data, 
          success:function(result){
              alert(result);
              j("#demo").html('');
              j('#demo').html(result);
          }});
  });
  </code></pre>
  
  <p>i got the value and put in response as a text plain, but in html page i see:</p>
  
  <blockquote>
    <p>[{"text":null,"value":10}]</p>
  </blockquote>
  
  <p>Instead of [{"text":(selected value of html select),"value":10}]</p>
  
  <p>i doing something wrong then i pass the data to servlet. how must i pass this var correctly?</p>
  
  <hr>
  
  <p>My code</p>
  
  <p>Javascript code </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var j = jQuery.noConflict();
  var abcdVal;
  j(document).ready(function(){
     //get a reference to the select element
    //request the JSON data and parse into the select element
    j.ajax({
        url: '/bin/company/repo',
        dataType:'JSON',
        success:function(data){
          //clear the current content of the select
          j('#abcd').html('');
          //iterate over the data and append a select option
          jQuery.each(data, function(text, value){
              j('#abcd').append('&lt;option id="' + value.value + '"&gt;' +         value.text + '&lt;/option&gt;');
          });
        },
        error:function(){
          //if there is an error append a 'none available' option
          j('#abcd').html('&lt;option id="-1"&gt;none available&lt;/option&gt;');
        }
  });
  j("#abcd").change(function(){
      var combo = document.getElementById('abcd');
      if(combo.selectedIndex&lt;0)
          alert('No hay opcion seleccionada');
      else 
          abcdVal = combo.options[combo.selectedIndex].value;
          alert('La opcion seleccionada es: '+combo.options[combo.selectedIndex].value);
  });
  var data = {"text" : abcdVal};
  alert(data);
  j("#mybutton").click(function(){    
      j.ajax({method: 'POST',
          url: "/bin/company/repo",
          dataType: 'JSON',
          data: data, 
          success:function(result){
              alert(result);
              j("#demo").html('');
              j('#demo').html(result);
          }});
  });
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>Servlet code </p>
  
  <pre><code>@Override
  protected void doPost(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException,
          IOException {
          String text = (String) request.getParameter("text");
          response.setHeader("Content-Type", "text/html; charset=UTF-8");
          StringWriter writer = new StringWriter();
          TidyJSONWriter json = new TidyJSONWriter(writer); 
          try 
          {   
             json.array();
             //loop through your options and create objects as shown below 
             json.object();
             json.key("text");
             json.value(text);
             json.key("value");
             json.value(10);
             json.endObject();
             //end your array 
             json.endArray();     
          } catch(JSONException e) {
              e.printStackTrace();
          }
  
         response.getWriter().write(writer.toString());      // Write response body.  
  }
  </code></pre>