Submit a form to external site that expects json data as post body

Question

I need to simulate submitting a form on an external site, I already had it working for other sites but now the external site expects json formatted values as parameters which is being hard to accomplish.

Before the server expects json I had it perfectly working with this (note the javascript simulates submitting the form, and the form is coded to relate to the external site):

<!DOCTYPE html>
<html lang="en">
<head>
    <title></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 load()
     {
         window.document.login_form.submit();
         return;
     }
    </script>

</head>
<body onload="load()">
<form name="login_form" method="post" action="http://external.webserver.com/web/session/authenticate">
    <input type="hidden" name="name" value="andres" />
    <input type="hidden" name="phone" value="593123123" />

</form>

Here I attacha an image that profs that it will work if I would post the body as json data. Proof that it works if post as body

As a solution I've tried other ideas like suggested here POST data in JSON format

     function load()
     {
         var frm = $(document.login_form);
         dat = JSON.stringify(frm.serializeArray());
         alert("I am about to POST this:\n\n" + dat);

         $.post(
                 frm.attr("action"),
                 dat,
                 function(data) {
                     alert("Response: " + data);
                     }
                 );

     //window.document.login_form.submit();
     return;
 }

But that approach takes me several other problems regarding related to 'Access-Control-Allow-Origin' which I won't fix as I don't own the server to which I want to post.

So would any one provide a better approach to make a json post (or post the body) to an external server?

Are you really sure the server expects JSON form data? Browsers never send form input in that format. The only formats that browsers normally support are `x-www-form-urlencoded` (the same format as URL query strings) or `multipart/form-data` (similar to multipart email bodies). — Barmar, Jan 17 '14 at 22:47

brandonscript · Answer 1 · 2016-06-27T18:29:46.260

-1

This answer was posted in 2014; a lot has changed since then, and this answer is more/less irrelevant now.

If the server is expecting a JSON payload, and if it works from hurl.it, you probably aren't having CORS issues.

$.post by itself can't set the content-type header; you need to use the parent $.ajax and make sure you're posting a proper JSON payload (try logging dat to console and checking it against jsonlint).

Your example also has several syntactical mistakes, such as the lack of quotes around document.login_form and the incorrectly formatted $.post.

Try cleaning it up:

var frm = $('document.login_form');
data = JSON.stringify(frm.serializeArray());

$.ajax(frm.attr("action"), {
    type: "POST",
    data: data,
    contentType: "application/json; charset=utf-8",
    dataType: "json"
}, function (data) {
    console.log(data);
});

edited Jun 27 '16 at 18:29

answered Jan 17 '14 at 22:22

brandonscript

68,675
32
163
220

The `dataType` parameter in `$.post` specifies the type of data that the server _returns_, not what it _expects_. – Barmar Jan 17 '14 at 22:44
@Barmar Right, sorry, I never use $.post, only $.ajax. – brandonscript Jan 17 '14 at 23:11
It's the same with `$.ajax`. – Barmar Jan 17 '14 at 23:14
Yeah, but you can't set `contentType` with $.post I believe? Or can you? I always just set it up like the updated example there, and obviously with both in place, it sends and requests JSON. – brandonscript Jan 17 '14 at 23:15
That's correct, you can't specify most AJAX parameters in `$.post`, except by calling `$.ajaxSetup` before it. – Barmar Jan 17 '14 at 23:20
"If the server is expecting a JSON payload, and if it works from hurl.it, you probably aren't having CORS issues." — This does not follow. hurl.it makes the request using server side code. The same origin policy only applies to browser side JavaScript. – Quentin Jun 27 '16 at 18:14
"$.post by itself can't set the content-type header" — Support for `jQuery.post( [settings ] )` was added in jQuery 1.12, although it couldn't in 2014. – Quentin Jun 27 '16 at 18:16
`JSON.stringify(frm.serializeArray());` won't give the payload shown in in the screenshot of hurl.it. – Quentin Jun 27 '16 at 18:17
@Quentin considering the age of the question, the fact that the OP never accepted an answer, and that the question itself is syntactically full of errors, I think all of that is completely moot. That said, you're right about Hurl.it, you're right about the payload in the form not matching the expected POST body, and you're right that $.post can now add the content-type header. – brandonscript Jun 27 '16 at 18:28

score -1 · Answer 2 · answered Jan 17 '14 at 22:22

You can't submit application/json using a form
You can't read the response from a different origin using JavaScript (unless that origin grants permission)

The only option left is to have your form or JavaScript send the data somewhere else (that you do control) and have the server responsible for handling that somewhere else issue an HTTP request of its own to the server you want to contact and then relay the response back to the browser.

Submit a form to external site that expects json data as post body

2 Answers2

This answer was posted in 2014; a lot has changed since then, and this answer is more/less irrelevant now.