Sending form data as JSON - Browser changing Content-Type

Question

I'm trying to create an HTML page that can submit the form data to the server in the form of JSON. I consulted the answers to this question and am using the following code to do this:

<head>
   <title>Test</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.json.org/json2.js"></script>
   <script type="text/javascript">
     $(function() {
       var frm = $(document.myform);
       var dat = JSON.stringify(frm.serializeArray());

       alert("I am about to POST this:\n\n" + dat);

       $.ajax({
          type: "POST",
          data: dat,
          success: function(){},
          dataType: "json",
          contentType : "application/json"
        });
     });
   </script>
</head>

<body onload="javascript:document.myform.submit()">
<form action="http://www.foo.com/" method="post" name="myform">
    <input name="firstName" value="harry" />
    <input name="lastName" value="tester" />
    <input name="toEmail" value="testtest@test.com" />
</form>

However, if I intercept the request using Burp proxy tool, I can see that for some reason, the Content-Type becomes application/x-www-form-urlencoded as soon as the request leaves the browser. Here's a screenshot of the request:

enter image description here

I would like to know why is this happening with the request? Why is the browser changing the Content-Type in the request? Is there a better way to do this?

PS: I've tried this without jQuery (using XHR as explained here).

score 3 · Accepted Answer · answered Jul 10 '14 at 18:44

Your jQuery $.ajax request has no URL specified, so it is just hitting your own website and doing nothing. Meanwhile the onload="javascript:document.myform.submit()" property in your HTML is using the browser's regular form submission, which is in fact application/x-www-form-urlencoded.

What you probably want to do is get rid of that statement and use jQuery's .submit to handle the form submission. You also want to specify the URL in the jQuery AJAX request.

Try something like this:

<head>
   <title>Test</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.json.org/json2.js"></script>
   <script type="text/javascript">
      $('#myform').submit(function() {
         var frm = $(this);
         var dat = JSON.stringify(frm.serializeArray()); 

         alert("I am about to POST this:\n\n" + dat);

         $.ajax({
             type: "POST",
             url: "http://www.foo.com/",
             data: dat,
             success: function(){},
             dataType: "json",
             contentType : "application/json"
         });
      });   
   </script>
</head>

<body>
    <form id="myform">
        <input name="firstName" value="harry" />
        <input name="lastName" value="tester" />
        <input name="toEmail" value="testtest@test.com" />
    </form>
</body>

I see the problem with my code. However, I'm still not able to make a POST request because the cross domain requests are forbidden by the browsers. — Rahil Arora, Jul 10 '14 at 20:23
right, you can do a get with jsonp but you will need to modify the server side code to make a cross domain post — user1572796, Jul 10 '14 at 21:45

score 1 · Answer 2 · edited May 23 '17 at 11:55

Also you are stringifying an array not an object. Below is what I would do for this:

<html>
<head>
   <title>Test</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript">
     $(function() {
    //var frm = $(document.myform);
    //var dat = JSON.stringify(frm.serializeArray());
    var dat = {
        firstName: $('#firstName').val(),
        lastName: $('#lastName').val(),
        email: $('#email').val()
    }
    $('#myform').submit(function(e) {
        $.ajax({
            datatype : "json",
            contentType: "application/json; charset=utf-8",
            type: "POST",
            url: '/local-url-to-controller.php',
            data: JSON.stringify(dat),
            success: function() {},
            error: function() {},
        });
        // Stops browser refresh
        e.preventDefault();
    });
    // Submit on document ready
    $('#myform').submit();
 });
 </script>
</head>
<body>
<form name="myform" id="myform">
    <input name="firstName" value="harry" id="firstName" />
    <input name="lastName" value="tester" id="lastName" />
    <input name="toEmail" value="testtest@test.com" id="email" />
</form>
</body>
</html>

If you are set on using serialized form data, try something like this: Convert form data to JavaScript object with jQuery

tested and this works fine, just update the url in the ajax and you're good to go. — user1572796, Jul 10 '14 at 18:55
It is not sending the data to the server. It is just sending an OPTIONS request to the server and that's it. — Rahil Arora, Jul 10 '14 at 19:12
What is the response of the OPTIONS request from the server? If the server says it doesn't accept the Content-Type then jQuery won't continue with the request — andrezsanchez, Jul 10 '14 at 19:21
Try and see if jQuery is giving you an error in the `error` function. — andrezsanchez, Jul 10 '14 at 21:08

Sending form data as JSON - Browser changing Content-Type

2 Answers2