1

While sending a JSONObject response to my dojo 1.9.3 request/xhr callback function I receive a Invalid character synatx error. I checked my JSON format with JSONLint and its valid. Really confused by what I'm doing wrong.

JSON format being sent:

{
    "issuer":"CN=***** CA , OU=*******, O=*********, L=****, ST=***, C=**",
    "Thumbprint":"*********",
    "valid to":"Mon *************",
    "valid from":"*****",
    "version":2
}

Servlet Code:

JSONObject cert = new JSONObject();
cert.put("version", x509certificate.getVersion());
cert.put("valid from", x509certificate.getNotBefore());
cert.put("valid to", x509certificate.getNotAfter());
cert.put("issuer", x509certificate.getIssuerDN().getName());
cert.put("Thumbprint", getThumbPrint(x509certificate));

System.out.println(cert);
System.out.println(cert.toString());
out.print(cert);

DOJO/HTML Code:

<body class="claro">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo-release-1.9.3/dojo/dojo.js' ></script>

<script type="text/javascript">
require(["dojo/dom", "dojo/on", "dojo/request/iframe", "dom/dom-form", "dojo/dom-  
 construct", "dojo/json", 
 "dojo/domReady!"],
function(dom, on, iframe, domForm, domConst, JSON){    
on(dom.byId("startButton"), "click", function(){    
domConst.place("<p>Requesting...</p>", "output");    
 iframe("addUser",{
  method:"POST",
  form:"theForm",
  handleAs: "json",
}).then(function(cert){    
alert("data received!");    
domConst.place("<p>data: <code>" + JSON.stringify(cert) + "</code></p>", "output");

 }, function(err){    
 alert("data denied!!!");    
 alert(err);
  }); }); });
</script>
<form id="theForm" method="post" enctype="multipart/form-data">
      <input type="text" name="fname" value="Hello" /><br />
  <input type="text" name="lname" value="World" /><br />
  <input type="file" name="fileName" value="World" /><br />
  <button type="button" id="startButton">Start</button>
 </form>
       <h1>Output:</h1>
      <div id="output"></div>
      <button type="button" id="startButton">Start</button>
       </body>
    </html>
ysabz
  • 39
  • 10
  • What does your JSON look like? – JW Lim Jul 06 '14 at 01:53
  • Please help me on this. I've tried everything I know. Have to use Dojo which has proven to be quite the challenge to me. – ysabz Jul 06 '14 at 07:17
  • @user3808671 Trying to make a guess. You are trying to print the object **cert** in the out statement `out.print(cert);` try instead to output the JSON string **cert.toString()** as `out.print(cert.toString());` Hope it helps – frank Jul 06 '14 at 08:59
  • Hi Frank, i already tried it. Same result. Callback function err gives me an error alert. – ysabz Jul 06 '14 at 16:31
  • New result: once I run it I get prompted to download a .json file which now has the JSON string response. why doesn't it get shown on my page? – ysabz Jul 06 '14 at 19:09
  • If you are using IE, this [post][1] might help you with the download issue. [1]: http://stackoverflow.com/questions/2483771/how-can-i-convince-ie-to-simply-display-application-json-rather-than-offer-to-dow – frank Jul 06 '14 at 20:05
  • Actually using chrome. I came across this link http://stackoverflow.com/questions/22919643/cannot-read-property-value-of-undefined-on-dojo-request-iframe-post. I'm going to wrap my JSON response with – ysabz Jul 06 '14 at 20:57

1 Answers1

1

The module dojo/request/xhr no longer uses the form property as far as I know. So, I think that the form data is not correctly send to the server.

If you want to send form data to the server, you could be using the dojo/dom-form module, for example:

xhr("addUser",{
    data: domForm.toObject("theForm"),
    method: "POST",
    handleAs: "json",
}).then(function(cert){    
    alert("data received!");    
    domConst.place("<p>data: <code>" + JSON.stringify(cert) + "</code></p>", "output");
}, function(err){    
    alert("data denied!!!");    
    alert(err);

    // Handle the error condition
});

Also make sure that you're sending it using the correct HTTP method, since the form property is not recognized, it will by default send it using GET. I noticed that your form uses POST, so you should use the method property to specify that.

The best thing to do is to check your network requests by using developer tools (usually by pressing F12 or Ctrl+Shift+I in your browser).

g00glen00b
  • 41,995
  • 13
  • 95
  • 133
  • 1
    Dimitri, are there and advantages to using iframe as opposed to xhr in this current situation. I changed the code as you said but came up with more errors. The developer browser tool looks good, thanks. I'll continue using it. Using iframe, i'm getting a blank.html with failed to load response data and error: "Resource interpreted as Document but transferred with MIME type application/json: "http://localhost:" I'm getting prompted to download a .json file. I'm using chrome. – ysabz Jul 07 '14 at 12:10
  • Usually `dojo/request/xhr` is the best way to go. The only limitation of XHR is that you cannot use cross-domain calls (unless providing CORS headers). That's why certain workarounds are available, like `dojo/request/script` and `dojo/request/iframe`, though each of them has its drawbacks. – g00glen00b Jul 07 '14 at 12:13
  • The drawback with the `dojo/request/iframe` module is that you cannot read the response body, which you need. – g00glen00b Jul 07 '14 at 12:15
  • The response you get means that some kind of HTML document is sent in stead of JSON. This often means that an error page is returned. Use the developer tools and look at the network tab to see what the response is. The server logs may help you as well with analyzing the problem. – g00glen00b Jul 07 '14 at 12:16
  • Dimitri, i'm not sure if the above approach domFrom.toObject handles multipart/form-data. Getting an error. – Error 500: javax.servlet.ServletException: SRVE8024E: The request is not of type multipart/form-data. – ysabz Jul 07 '14 at 20:54
  • Well, xhr can't use multipart/form-data and iframe can't read body of message being return. Ohh man. – ysabz Jul 09 '14 at 11:58