How to POST this Output to the API

Question

Hi i have create a JSON object getting data from a form and now i want to POST that into redmine API. This is what i have done so far.

<script>
// This is the creation of JSON object 
$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return {"project":o};
};

// This is the API linking and POSTING

    $(document).ready(function(){
        $("#submit").on('click', function(){
            // send ajax
            $.ajax({
                url: 'http://localhost/redmine/projects.json', // url where to submit the request
                type : "post", // type of action POST || GET
                dataType : 'jsonp',
                headers: { 'X-Redmine-API-Key': 'admin' }, 
                data : JSON.stringify($('form').serializeObject()), // post data || get data
                success : function(result) {
                    // you can see the result from the console
                    // tab of the developer tools
                    alert("Sucess");
                    console.log(result);
                },
                error: function(xhr, resp, text) {
                    console.log(xhr, resp, text);
                }
            })
        });
    });
</script>

<form action="" method="post">
First Name:<input type="text" name="name" maxlength="12" size="12"/> <br/>
Last Name:<input type="text" name="identifier" maxlength="36" size="12"/> <br/>
<!-- number:<input type="number" name="number" maxlength="36" size="12"/> <br/> -->
<textarea wrap="physical" cols="20" name="description" rows="5">Enter your favorite quote!</textarea><br/>
<p><input type="submit" /></p>
</form>

The post doesn't work. JSON object is created well, Passing that to API is the problem. I think problem is here,

data : JSON.stringify($('form').serializeObject()),

How do i pass the created JSON Object above to data. Thanks

Answer 1

You can not use POST and custom headers with jsonp. What jsonp does to work across different domains is basically inserting a <script> tag that calls a callback when finished, e.g.

<script src="different.domain/api/projects.json?callback=done123"></script>

function done123 (result) {
  // do something with result
}

The server (if it supports a jsonp call) then returns JavaScript (not JSON!) that looks like this:

done123({"name1":"val1","name2":{"name3":true,"name4":5}})

Which calls your function when done and works cross-domain because it uses a script tag.

If you run the script from the same domain that redmine is running, change the dataType: 'jsonp' to json. Depending on how redmine expects you to send the data (JSON-body vs. form-data), you might need to change the data value:

// When redmine API expects JSON post body
data : JSON.stringify($('form').serializeObject()),

// When redmine API expects multipart POST data
data : $('form').serializeObject()