CODEWITHSUNDEEP
javascriptjqueryjsonrest
Porkball21
Porkball21

Reputation: 125

Calling RESTful web service using a GET in JavaScript

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' && 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>

Upvotes: 2

Views: 46

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337714

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);
    }
  });
});

Upvotes: 2

Related Questions