How to push a JSON to a webservice using Ajax

Question

I have a form on my HTML page with some fields to be filled and an option to upload a file.
My Javascript function converts the inputs to the fom into a json file. I am trying to push this generated json along with the file uploaded by the user to a webservice but I am getting an error which says

405 OPTIONS

Here's the Ajax function I wrote. The formData.serializeObject() function gives me the Json output to the form.

$(function() {
$('form').submit(function() {
($('#file')[0].files[0].name);

            var formData = new FormData($("form")[0]);
            formData.append("filename", $('#file')[0].files[0].name);
            var obj = new FormData();
            form = form
            $.ajax({
                url: "Webserviceurl:port/function_to_send_json",
                type: "POST",
                data: JSON.stringify(formData.serializeObject()),
                dataType: "json",
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                success: function(data) {
                    $.ajax({
                        url: "Webserviceurl:port/function_to_send_file",
                        type: "POST",
                        data: obj,
                        contentType: false,
                        success: function(data) {

                        },
                        error: function(data) {
                            console.log("Error Happened");
                        }
                    });
                    return false;
                },
                error: function(data) {
                    console.log("Error Happened");
                }
            });
        })
    });

What could I be doing wrong here?

@Leopard that is the error I am getting followed by my function_to_send_file name — Saksham Arora, Dec 19 '16 at 10:09
Your `contentType` (`application/x-www-form-urlencoded`) mismatch to actual data sent (JSON) — hindmost, Dec 19 '16 at 10:11
Webserviceurl:port - suggests a cross origin request - which explains the `OPTIONS 405` (method not allowed) message — Jaromanda X, Dec 19 '16 at 10:18
@hindmost I'm uploading a Json file and a CSV file. What contentType should I give then? — Saksham Arora, Dec 19 '16 at 10:23
@JaromandaX I tried adding the cross origin request header to give permission but I'm still getting the same error — Saksham Arora, Dec 19 '16 at 10:24
it's the **response** headers that will be your problem, after you fix the real big issue that your server doesn't support the OPTIONS method - pretty big obstacle when wishing to have CORS access — Jaromanda X, Dec 19 '16 at 10:27
@JaromandaX I have now hosted my website on the same server as my webservice to avoid cross origin request but I am still getting the same error — Saksham Arora, Dec 19 '16 at 13:10

score 0 · Answer 1 · edited May 23 '17 at 11:53

The error message is being reported because you are making a preflighted request. This means the browser is sending an OPTIONS request asking for permission to make a POST request.

The server is responding to the OPTIONS request with a 405 error meaning "You can't make an OPTIONS request to this URL!"

That said …

data: JSON.stringify(…),

If you are sending JSON then you should say you are sending JSON, which ha a content type of application/json, not:

contentType: "application/x-www-form-urlencoded;charset=UTF-8",

There is no serializeObject method on formData objects, so formData.serializeObject() should be throwing an exception.

This question covers how to upload files with Ajax.

I have written my own function to convert the data to JSON format and its working. There's no error being thrown there. I even changed the content type to JSON and hosted my website and my webservice on the same Tomcat server but I'm still getting the exact same error. — Saksham Arora, Dec 19 '16 at 13:12

How to push a JSON to a webservice using Ajax

1 Answers1