asp.net webapi POST works on Postman, but not in browser AJAX request

Question

My asp.net HttpPost test applicantion is working fine in Postman, but it returns error in HTML AJAX request.

My controller:

public class ContactController : ApiController
{
    [HttpPost]
    public string Post([FromBody] myData m)
    {
        return String.Format("Test A");
    }
}

Class:

public class myData
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
}

If I run the request in Postman with the URL: http://localhost:52884/api/contact and the body:

{ 
    "FirstName" : "FName", 
    "LastName" : "LName" 
}

It runs fine! I see the output: "Test A"

However, when I try it with HTML Ajax request:

    <html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
    <script>
        $.ajax(
        {
            url: "http://localhost:52884/api/contact",
            type: "POST",
            dataType: 'jsonp',
            data: { FirstName: "FName", LastName: "LName" },
            success: function (result) {
                alert(result);
            },
            error: function (xhr, status, p3, p4) {
                console.debug(xhr);
                var err = "Error " + " " + status + " " + p3;
                if (xhr.responseText && xhr.responseText[0] == "{")
                    err = JSON.parse(xhr.responseText).message;
                alert(err);
            }
        });
    </script>
</body>

</html>

I see in the console the error:

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol
Loading failed for the <script> with source “http://localhost:52884/api/contact?callback=jQuery112409902197956907268_1507917530625&FirstName=FName&LastName=LName&_=1507917530626”.

Please, change dataType: 'jsonp' to dataType: "json". — Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez, Commented Oct 13, 2017 at 18:12
you are using jsonp but there is no callback in your code. Have you tried using JSON.stringyfy({ FirstName: "FName", LastName: "LName" }) — Niladri
– Niladri, Commented Oct 13, 2017 at 18:15
which version of web api are you using? have you set the default return value in json format in config file? — Niladri
– Niladri, Commented Oct 13, 2017 at 18:17
No, it is not working. Try to call your index.html from a file outside the Visual Studio project. — user6824563
– user6824563, Commented Oct 13, 2017 at 19:05

dveloso · Accepted Answer · 2017-10-28 01:32:06Z

2

Good night!

You need use JSON.stringfy in your object, against { FirstName: "FName", LastName: "LName"}

See example:

const data = { FirstName: "FName", LastName: "LName"} const jsonData = JSON.stringfy(data);

url: "http://localhost:52884/api/contact", type: "POST", dataType: 'jsonp', data: jsonData, //{ FirstName: "FName", LastName: "LName" }, success: function (result) { alert(result); },

I hope I can help you.

answered Oct 28, 2017 at 1:32

dveloso

1141 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

asp.net webapi POST works on Postman, but not in browser AJAX request

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related