Calling RESTful web service using a GET in JavaScript

Question

I am struggling to send a GET request to my web service.

I have a web service set up that has values assigned to x and y values, where x represents a value A-E and y represents a value 1-5. Let's say that, the values are assigned to C1.

So if I point to the URL: x.x.x.x:xxxx/app/x/c/y/1 then I would get back a response of 'Success' and if x and y represent other values then I have messages for failure and so on for invalid data types.

I cannot seem to get it to work!

The web service contains the following logic:

log.info 'queryContext = ' + queryContext
def x = queryContext.get('x',"value")
def y = queryContext.get('y',"value")
def yN = y.toInteger()
log.info 'x = ' + x
log.info 'y = ' + y

if (x == 'C' ||  x == 'c' &amp;&amp; y == '4') return("Hit")
if (yN == 0 || yN > 5) return("Error1")
def checkX = ['A','a','B','b','C','c','D','d','E','e'].containsAll(x)
if (checkX == false){return("Error2")}</con:dispatchPath><con:dispatchXPath/><con:parameterDispatcherRuleContainer/><con:routeScript/><con:response name="Hit" id="13e72027-3b34-4771-931a-578bd023d584" httpResponseStatus="200" mediaType="application/json"><con:settings/><con:responseContent>{
    "Result":"HIT"

HTML/JavaScript code:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            $('#btn').click(function () {
                var obj = { x: $("#xcoord").val(), y: $("#ycoord").val()};
                $.ajax({
                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    url: "http://x.x.x.x:xxxx/app/",
                    data: JSON.stringify(obj),
                    dataType: "json",
                    success: function (data) {
                        alert(data);
                    }
                });
            });
        });
    </script> 
<title>Battleships</title>
</head>
<body>
<form>
X Coordinate:<br>
<input type="text" id="xcoord"><br>
Y Coordinate:<br>
<input type="text" id="ycoord"><br><br>
<input type="button" value="Submit" id="btn">
</form>
</body>
</html>

Did you try hitting with a hardcoded url from the javascript function in your html page? Something like url: "http://x.x.x.x:xxxx/app/x/c/y/1" in $.ajax() call of $(document).ready() function? — ArunGeorge
– ArunGeorge, Commented Jul 7, 2017 at 12:18

Rory McCrossan · Accepted Answer · 2017-07-07 12:20:03Z

2

Your question states:

So if I point to the URL: x.x.x.x:xxxx/app/x/c/y/1 then I would get back a response of 'Success'

Therefore you need to send the values in the URL. However your current jQuery code is sending them in the querystring, as you specify the data property of $.ajax, ie.

x.x.x.x:xxxx/app/?x=c&y=1

To fix this, set the URL of the AJAX request like this:

$('#btn').click(function () {
  $.ajax({
    type: "GET",
    contentType: "application/json; charset=utf-8",
    url: "http://x.x.x.x:xxxx/app/x/" + $("#xcoord").val() + '/y/' + $("#ycoord").val(),
    dataType: "json",
    success: function (data) {
      alert(data);
    }
  });
});

answered Jul 7, 2017 at 12:20

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

4 Comments

Porkball21 Over a year ago

Worked like a charm! Thank you. Just a note to anybody reading this, it will return Object Object in the alert so you have to stringify it first

Rory McCrossan Over a year ago

No problem, glad to help. The [Object object] issue is because the alert() calls toString() on any value it gets. It's for that reason it's best not to use it and use either console.log() or console.dir() instead

Porkball21 Over a year ago

Thanks, sorry for my vague question earlier... I should have done some research first and was being lazy!

Rory McCrossan Over a year ago

That's ok. I thought I recognised this question as one I'd seen before :) Apologies if my comment on the previous question came across as rude. This one is much clearer and easier to understand.

Collectives™ on Stack Overflow

Calling RESTful web service using a GET in JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related