title: Ajax post form to servlet without refresh
body: <p>I understand that this question has been done to death so I'll apologise in advance but I'm just not getting it. What I am looking to do is some sort of rating system and while I've looked at several examples in tutorials on other sites, they are all a bit bloated and not really what I'm after.</p>
  
  <p>I need to submit a form when a radio button is selected. The radio button represents some number which I need to use server side as I need to update databases etc with this value. What I need after that is for the updated database value to be returned to the jsp and display this number.</p>
  
  <p>All of the backend stuff isn't a problem really. All I need is to be able to send the form data to the servlet and get the updated value back without reloading the page. I  would also like to use a <code>post</code> <code>form</code> action to do this if possible, but that isn't crucial.</p>
  
  <p><strong>Skip to edit 3</strong></p>
  
  <p>Is this possible without having some 200 line JQuery / Ajax script ?</p>
  
  <p>I've gotten as far as </p>
  
  <pre><code>$('#submit').click(function(){
  $.ajax({
      url: '/Rating',
      type:'POST',
      data: {
          message: s
      },
      success: 
          function(msg){
              alert("Success");
              // ill want to do something with divs here later i.e a refresh or toggle
          }                   
      });
  });
  </code></pre>
  
  <p>which I gleamed from other threads on this topic. I need it to work with some basic html form like </p>
  
  <pre><code>&lt;form action="/" id="rating" method="Post"&gt;
     &lt;input type="radio" name="ra1" onclick="formaction"&gt;
     &lt;input type="radio" name="ra1" onclick="formaction"&gt;
     &lt;input type="radio" name="ra1" onclick="formaction"&gt;
     &lt;input type="radio" name="ra1" onclick="formaction"&gt;
     &lt;input type="radio" name="ra1" onclick="formaction"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Edit: The servlet i want to send the information to is named Rating with a url-pattern /Rating in my web.xml file. Do i get the information passed to it with a standard request.getAttribute(String value) call and which string value do i look for? "message" or "s" ?</p>
  
  <p>I'd appreciate any help. Thanks.</p>
  
  <p><strong>Edit 2:</strong> I set up a test page to try to make this ajax stuff work. Using 3nigma's solution i have </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="jquery-1.7.1.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(":radio").change(function(){
  
  var formData = $("form").serialize();
  console.log(formData);
  $.post("/Test",{data:formData},function(val){
  //val has the updated value that you will send from the servlet
  //do something
  });
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form action="/Test" id="rating" method="Post"&gt;
  &lt;input type="radio" name="ra1" /&gt;
  &lt;input type="radio" name="ra1" /&gt;
  &lt;input type="radio" name="ra1" /&gt;
  &lt;input type="radio" name="ra1" /&gt;
  &lt;input type="radio" name="ra1" /&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>inside my Test servlet in the doPost method i have </p>
  
  <pre><code>request.getAttribute("formData");
  request.getAttribute("data");
  System.out.println("test");
  </code></pre>
  
  <p>when i run the jsp page and select a radio button nothing appears to happen. The System.out.println() doesnt get executed which makes me think that its never reaching the servlet.
  Anybody see anything im doing wrong ?</p>
  
  <p><strong>Edit 3</strong>
  Finally got it working. I'll include the problems i had incase anybody gets stuck in some of the same places.</p>
  
  <p>When sending to the servlet with name Rating the url is just "Rating" and not "/Rating" as it may be in web.xml.</p>
  
  <p>Inside the doPost method in Servlet, use request.getParameter("itemID") to retrieve the data</p>
  
  <p>The best thing i did all weekend was install firebug. That pretty much told me where i failed and set me on the right track. Thanks to the people who replied.</p>
  
  <p>The code I ended up using was posted by danniehansenweb except I fixed a simple mistake. The comma inside the data { } should not be there. Instead move it outside the closing curly bracket like </p>
  
  <pre><code>data {itemID : rel },
  </code></pre>