Calling web service with parameters using JavaScript/ jQuery

Question

I have a local web service that is: http://localhost:8088/api/DuplicateCleaner/table

The service works fine when called from a browser, the returned value is a string for example: table

I am coding a simple HTML page to call it, my first attempt was using jQuery $.getJSON, which failed with this error: Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

When I researched this error, I came across a solution by using jsonp which unfortunately returns the error things?callback=jQuery1102036_1475067308508&things=table&_=1475067308509:1 Uncaught ReferenceError: things is not defined

As you see in my code, things is the parameter which will be holding the data passed to the service.

<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<script type="text/javascript">
    function jsonCallback(_json){
        console.log(_json);
    }

    $.ajax({
        url: "http://localhost:8088/api/DuplicateCleaner/things",
        data: {
            'things': "table"
        },
        dataType: "jsonp"
    });
</script>
</body>
</html>

I am just looking to use the service from a simple HTML page!

It is a local HTML file, "file:///C:/Users/xxxxx/Downloads/consumeWebService.html". Is that what you meant? — user1483799, Sep 28 '16 at 13:27

score 0 · Answer 1 · answered Sep 28 '16 at 13:12

0

Can you make a try with that?

$.post('http://localhost:8088/api/DuplicateCleaner/things',
       {things: "table"},
  function(response) {
       alert ("Works! Return value is " + response);
  });

answered Sep 28 '16 at 13:12

Michael

1,063
14
32

Getting two errors: First Error: Request Method:POST Status Code:405 Method Not Allowed. Second Error: No 'Access-Control-Allow-Origin' header is present on the requested resource. – user1483799 Sep 28 '16 at 13:20
Is it possible that your web service accept only GET and this is why it's only working in the browser? Do you need to enable POST? Source: http://stackoverflow.com/questions/21706078/put-and-post-getting-405-method-not-allowed-error-for-restful-web-sevices – Michael Sep 28 '16 at 13:27
Correct, I will modify the service and give it a try! – user1483799 Sep 28 '16 at 13:29
Modified the web service and used your $.post example, now getting one error. Error: No 'Access-Control-Allow-Origin' header is present on the requested resource. – user1483799 Sep 28 '16 at 13:38
It seems that your web service is not in the same server that your javascript. I saw your answer that you run the file directly on your c:, so if you are able to run in on your http://localhost:8088 you will be able to call it with the $.post. If you can't, I invite you to read that thread: http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource – Michael Sep 28 '16 at 13:43

Calling web service with parameters using JavaScript/ jQuery

1 Answers1