By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,988 Members | 1,017 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,988 IT Pros & Developers. It's quick & easy.

How to correctly encode text sent over a form using ajax?

P: 2
I have a java servlet (called "Compiler") that gets some java code sent from an html form, compiles the code and returns the results (if there's an error, it indicates in what line and what kind of error). I use ajax to display those results in the same html page that contains the form.
The thing is, if I just use the form without any ajax, everything works as expected. But when I add the ajax scripts I get some characters removed or the whole text after them completely stripped out (for example: +, =, % and so on).

This is my html:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4.  
  5. <script type="text/javascript">
  6.  
  7. function objetoAjax(){
  8.     http_request= false;
  9.     if (window.XMLHttpRequest) { // Mozilla, Safari,...
  10.         http_request = new XMLHttpRequest();
  11.         if (http_request.overrideMimeType) {
  12.            http_request.overrideMimeType('text/xml');
  13.         }
  14.      } else if (window.ActiveXObject) { // IE
  15.         try {
  16.            http_request = new ActiveXObject("Msxml2.XMLHTTP");
  17.         } catch (e) {
  18.            try {
  19.               http_request = new ActiveXObject("Microsoft.XMLHTTP");
  20.            } catch (e) {}
  21.         }
  22.     }
  23.     return http_request;
  24. }
  25.  
  26. function devolver_resultado(){
  27.     var llamadaAjax = objetoAjax();
  28.     var codigo = document.getElementById('codigo').value;
  29.     llamadaAjax.open("POST",'Compiler',true);
  30.     llamadaAjax.onreadystatechange = function() {
  31.         if(llamadaAjax.readyState == 4){
  32.             document.getElementById("resultado").innerHTML = llamadaAjax.responseText;
  33.         }
  34.     };
  35.     llamadaAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  36.     llamadaAjax.send('codigo='+codigo);
  37. }
  38.  
  39. </script>
  40.  
  41.  
  42. </head>
  43.  
  44. <body>
  45.  
  46. <form action="Compiler" method="post">
  47.     <textarea rows="18" cols="70" id="codigo" name="codigo"></textarea>
  48.     <input type="submit" value="Compilar" onclick="devolver_resultado(); return false;">
  49. </form>
  50.  
  51. <div id="resultado">
  52. </div>
  53.  
  54. </body>
  55. </html>
When debugging, I added a breakpoint right after var codigo = document.getElementById('codigo').value;
and found out that the variable "codigo" is getting the correct string assigned:



But then I check the request sent by the browser to my servlet and it's completely different:




I'm not exactly sure, but I suspect the problem can be in this line: llamadaAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
However, I tried replacing "application/x-www-form-urlencoded" with "multipart/form-data" and I get a 500 server error.

How can I fix this?

Thanks!!
May 1 '14 #1
Share this Question
Share on Google+
1 Reply


P: 2
SOLVED.

All I needed was to encode the text before sending it:

Expand|Select|Wrap|Line Numbers
  1. llamadaAjax.send('codigo='+encodeURIComponent(codigo));
May 1 '14 #2

Post your reply

Sign in to post your reply or Sign up for a free account.