$.ajax POST call to ServiceStack webservice, parameter not arriving

Question

I am trying to learn how to program a web service with ServiceStack and call it via ajax in JavaScript. I did this by watching the pluralsight movies and I think I almost figured it out how to do that except for passing data as parameters with a service call.

I try to call the service with this ajax-call:

  var request = { };
  request.Amount = 32;

  $.ajax({ type: 'POST',
           contentType: 'application/jsonp; charset=utf-8',
           url: "http://localhost:1879/entry",
           dataType: 'jsonp',
           data: {request: request},
           success: function(result){
               alert(result.Id);
           }});

The service looks like this:

public class EntryService : Service
{
    public object Post(Entry request)
    {
        return new EntryResponse() { Id = request.Amount };
    }
}

[Route("/entry", "POST")]
public class Entry
{
    public int Amount { get; set; }
}

public class EntryResponse
{
    public int Id { get; set; }
}

I expect the alert in the callback to show the number 32, but it shows the number 0. And when I debug my service I see that request.Amount is 0 as well, so I think I do something wrong at the Ajax service call but I cannot figure out what. So I wonder what I am doing wrong here.

Did you setup your service to be compatible with JSONP of jQuery? You know the callback handler has a specific name etc. — adrian, Jun 06 '13 at 21:11
Two things to try: 1) try changing data: {request: request} to data: request 2) if you need jsonp add SetConfig(new EndpointHostConfig {AllowJsonpRequests = true}); to your AppHost (https://github.com/ServiceStack/ServiceStack/wiki/Configuration-options) — paaschpa, Jun 07 '13 at 06:52
(In reply to your deleted answer) Perhaps you're making things too complicated? What you're trying to do is not at all complex. I would go back to older tech and give asmx or page methods a try. They work a treat with jQuery. Btw, you don't need a different port for a web service. — Stephen Kennedy, Jun 08 '13 at 13:49
http://stackoverflow.com/a/16335022/397817 may or may not help. — Stephen Kennedy, Jun 08 '13 at 13:50

score 2 · Answer 1 · answered Jul 24 '13 at 03:43

author of that Pluralsight course here. Hopefully I can help you.

First thing you should do is make sure the API is working correctly.

Go to this: http://localhost:1879/entry In your web browser you should see a page displayed that has information about the service. If you don't your URL is wrong or ServiceStack is configured wrong.

Assuming the URL is correct, all you should need to do is wrap your data in JSON.Stringify(). When you do a post, the data has to be in JSON format as a JSON string. You are currently sending a JSON object.

Also, most likely you can drop the localhost bit off your url in the $.ajax call and just do "entry"

score 1 · Answer 2 · edited May 23 '17 at 12:30

1

You can not do a post with JsonP. If you are trying to do a cross domain POST you need to look into cors and make sure that is enabled for the the service you are POSTing to.

Post data to JsonP

edited May 23 '17 at 12:30

Community

1
1

answered Jun 06 '13 at 21:13

Tyler Smith

1,269
1
12
24

I found the jsonp option as a solution for not getting any alert at all from the success callback of ajax. that is why I changed json to jsonp. If I change it back to json, I dont see an alert at all. I don't have a lot of experience when it is about web services so I don't know if I am trying to do any cross domain posting or not. All I want is a web service that I can call with parameters, can do something with those parameters and get an answer back from the web service with some result based on the parameters or a message, whatever the situation demands. – Cornelis Jun 06 '13 at 21:25
So what if you are trying to connect to a service on a different domain (when you webservice does not have what you are trying to connect to it as part of the same url domain) you need to enable cors to properly do cross domain ajaxing. Can you give me a better idea of what sort of setup you are working with (what webservice you are trying to access and where you are trying to access it from)? – Tyler Smith Jun 07 '13 at 02:39
For a website I want to build in the future, I want the communication act like this (or whatever is possible). I have a website: http://www.mywebsite.com which is build in html + jquery + angular js. I also got a webservice hosted on the same domain: http://www.mywebsite.com/mywebservice/ (and if a portnumber is required, it is added ofc.). Via an $.ajax I try to get and push data to that webservice which processes the data and gives data in return when needed to. And to learn how to set up the communication, I try to do that with the code in my first post, where the input is the output. – Cornelis Jun 07 '13 at 07:11
If the website and webservice are on the same domain as you said, you should not have to use jsonp. If you do i dont think applicaiton/jsonp is correct you want to use application/javascript because jsonp is handing you back a script. (also i am not sure application/jsonp exists) http://stackoverflow.com/questions/111302/best-content-type-to-serve-jsonp – Tyler Smith Jun 07 '13 at 08:11

score 1 · Answer 3 · answered Jun 07 '13 at 16:26

I only used jsonp cause I read and hoped that it could be the solution for my problem. But based on your explanation I shouldn't need it, so I changed my code to this:

  var request = { };
  request.Amount = 32;

  $.ajax({ type: 'POST',
           contentType: 'application/json; charset=utf-8',
           url: "http://localhost:1879/json/reply/Entry",
           dataType: 'json',
           data: request,
           success: function(result){
               alert(result.Id);
           },
           error: function(xhr, ajaxOptions, thrownError){
               alert("Failure!");
               alert(xhr.status);
               alert(thrownError);
           }});

First I had this call without the error part and nothing happened, no alert, no error, nothing. So I assumed the error was consumed instead of being showed, so I added the error callback and my assumption seemed to be right. Now I get 3 alerts and the last 2 alerts shows "400" and "bad request".

I searched on those errors and tried but none of the possible solutions I found fixed my problem. I tried 2 urls: /json/reply/Entry and /entry after the localhost part but both didn't work. So what am I doing wrong?

If you're using the default ServiceStack endpoint "api", try http://localhost:1879/api/Entry — Mike Pugh, Jun 07 '13 at 19:51
Thanks for the help, but it isn't working. If I change the url to what you were suggesting, I get a 404 error. How can I figure out if I am using the default ServiceStack endpoint? — Cornelis, Jun 07 '13 at 23:49
Depends on how you're hosting - if you're hosting via ASP.NET, check your web.config. You should see an http handler setup with a path="api*". If it's just path="*" then try localhost:1879/Entry. Check out this page https://github.com/ServiceStack/ServiceStack/wiki/Create-your-first-webservice - and also try to find your metadata page (localhost:1879/api/metadata) — Mike Pugh, Jun 08 '13 at 01:13
ah, well it says path="*" and my metadata can be reached by localhost:1879/metadata. And calling localhost:1879/Entry gives me the bad request (400 error) again like I said in one of the posts above. — Cornelis, Jun 08 '13 at 09:01

$.ajax POST call to ServiceStack webservice, parameter not arriving

3 Answers3