Bad request for POST and no return value for GET using Ajax

Question

I have the code to post data to the django server and get data from it using ajax. When I use post method the server responds with Bad Request: /quizzes/ [29/Apr/2019 18:13:42] "POST /quizzes/ HTTP/1.1" 400 83 And in the ajax code is not returning any information, not in error nor complete.

When I tried to get data from the server, the server says it's okay [29/Apr/2019 18:19:57] "GET /quizzes/ HTTP/1.1" 200 249 but the code entered the error and complete blocks with error msg ONLY "Error with status: error"

Another problem is when the request end, my firefox reloads the page and I don't know why

So anyone can suggest a solution to these problems?!

This is my Ajax code for post method, which not giving me any response And the server is expecting to recieve json object in this format

{
'title': "superheroes java",
'pass_score': 1,
'num_of_questions': 3,
'expected_duration': 10,
'skill_type': {"name": "java"},
}

Here's how I format and send it

  $("#add-quiz").click(function () {
        quizData = {
            title: $("#quizTitle").val(),
            pass_score: Number($("#quizPassScore").val()),
            num_of_questions: Number($("#quizNumQuestions").val()),
            expected_duration: Number($("#quizDuration").val()),
            skill_type: {name: $("#quizSkillType").val()}
        };
        response = ""
        $.ajax({
            url: "http://127.0.0.1:8001/quizzes/",
            dataType: "json",
            method: "POST",
            data: quizData,
            success: function () {
               response = "success";
            }, error: function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR, textStatus, errorThrown);
            }, complete: function (request, status) {
                alert("Error with status: " + status);
            }
        });
        alert(response);
    });

And this is get method which says Error with status: error

 response = "";
        $.ajax({
            url: "http://127.0.0.1:8001/quizzes/",
            method: "GET",
            success: function (data) {
                response = data;
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("Status: " + textStatus + "Error: " + errorThrown);

            }, complete: function (request, status) {
                console.log("Error with status: " + status);
            }
        });
        alert(response);

I'm just using respone for further testing

Sounds like the error is occurring on the server side (i.e., Django). It would be better if you tagged this with `[django]` and provided the code for the server side method. — Heretic Monkey, Apr 29 '19 at 18:41
I think you are sending the object but not a JSON. Can you try using JSON.stringify(quizData)? — J. Nicastro, Apr 29 '19 at 18:41
@J.Nicastro I added it, but it gives me an error, Error with status: error!! — shrouk mansour, Apr 29 '19 at 18:45
@HereticMonkey I just don't think as the server side is tested and doing the right jop using tools like postman — shrouk mansour, Apr 29 '19 at 18:45
@shroukmansour usually bad request means you are not structuring your request correctly, You might be missing a header or the body is not as expected — J. Nicastro, Apr 29 '19 at 18:47
@shroukmansour also if you can provide the documentation of the endpoint, do so. — J. Nicastro, Apr 29 '19 at 18:48
@J.Nicastro I already have written what the endpoint is expecting to recieve — shrouk mansour, Apr 29 '19 at 18:49
Seems that there should be a front controller that you need to hit first. Such as `http://127.0.0.1:8001/API/quizzes/` where "quizzes" is the ROUTE. — EternalHour, Apr 29 '19 at 19:05
@EternalHour No, I don't need as it works correctly using REST client app — shrouk mansour, Apr 29 '19 at 19:10
After trying a lot of posible solutions. It seems it's a CORS problem. Solution can be found here https://stackoverflow.com/questions/25810559/sending-ajax-request-with-a-rest-works-but-not-with-jquery — J. Nicastro, Apr 29 '19 at 19:27

score 1 · Accepted Answer · answered Apr 29 '19 at 19:49

1

The problem was that cross-origin resource sharing was disabled. We were able to solve it adding the needed configurations to the server to allow them.

The server used DJANGO so the steps we followed were the ones on the answer of this question

answered Apr 29 '19 at 19:49

J. Nicastro

254
3
11

Bad request for POST and no return value for GET using Ajax

1 Answers1