I’ve spent a lot of time at work lately struggling with how to send a form submission to two different places at once.
I started just using the jQuery get method. Why not, right? That’s all I wanted to do, was make a one way request to a remote server. It worked fine as expected and I moved onto another project.
Unfortunately, I’m spoiled by jQuery’s usual similarity across the various browsers, and I didn’t test for the data going through in any other browsers. It turns out that while Chrome’s behavior is according to spec, it’s still not something the other browsers permit.
After some research, I added $.getJSON, which still wouldn’t work unless you add ?callback into the target url.
The wikipedia page for jsonp explains how it’s done on the backend best. Basically, it dynamically adds a script tag with “src=” set to the remote server and the data you want to send in the query string.
Then we ran into another weird problem. It would work in Firefox while debugging, but not in practice. Which means Firefox was executing the post command in the form before letting the jQuery finish the getJSON command. Since we needed to pop up an alert for the user anyway, I just added that after getJSON and it worked flawlessly. But in other scenarios there’s still the open question, what’s the best way to give it enough time to finish?
p.s.
Using JSONP to send and receive any kind of sensitive data is dangerous as any malicious site could make the same request.
p.s.s
I wonder if there isn’t some simpler way to do this but the alternatives sound just as messy. i.e. dynamically opening an iframe with display set to none.